JQuery исчезают в вопросах

Question

JQuery исчезают в вопросах

0

function change(){
    setInterval(function() {
    var textSpan = $('#aboutUsText');
    if (textSpan.attr("MyState")=="2"){
        textSpan.text('Info 1');
        textSpan.fadeIn("slow");
        textSpan.attr("MyState", "1");
    }else if (textSpan.attr("MyState")=="3"){
        textSpan.text('Info 2');
        textSpan.attr("MyState", "2");
    }else{
        textSpan.text('Info 3');
        textSpan.attr("MyState", "3");
    }
    }, 3000);
}
window.onload = function start() {
    change();
}

Код работает нормально, но я пытаюсь заставить текст исчезать перед секцией Info 1, я не понимаю, почему это не работает? Я использую JQuery, Большое спасибо: 3

user3576711 30 апр. 2014, в 20:49

Источник

0

Как это не работает? Что происходит и что вы хотите, чтобы произошло (ожидаемое и реальное поведение)?
Farid Nouri Neshat 30 апр. 2014, в 18:35
1

Требуется полный код ....
Bhavik 30 апр. 2014, в 18:35
0

Также репликация этого в jsfiddle.net поможет людям лучше понять вашу проблему.
Farid Nouri Neshat 30 апр. 2014, в 18:37
0

Код прокручивается, но затухание в строке 6 не приводит к изменению элемента. Вот соответствующий HTML-код: pastebin.com/RivDzHxL
user3576711 30 апр. 2014, в 18:37
0

jsfiddle.net/NpGXC Проблема в том, что он, кажется, не прокручивает на jsfiddle
user3576711 30 апр. 2014, в 18:40

Показать ещё 3 комментария

Теги:

javascript

jquery

3 ответа

Ещё вопросы

Как это не работает? Что происходит и что вы хотите, чтобы произошло (ожидаемое и реальное поведение)?
Также репликация этого в jsfiddle.net поможет людям лучше понять вашу проблему.
Код прокручивается, но затухание в строке 6 не приводит к изменению элемента. Вот соответствующий HTML-код: pastebin.com/RivDzHxL
jsfiddle.net/NpGXC Проблема в том, что он, кажется, не прокручивает на jsfiddle

MD. Sahib Bin Mahboob · Answer 1 · 2014-04-30T17-15-00.000Z

Ваш элемент уже отображается. Таким образом, нет возможности перепродать его. Сначала вам нужно скрыть

используя css или скрытое свойство <p> примените fadeIn(). Для простоты я использовал hidden технику собственности.

Вы также можете улучшить свой код, отделив информацию о принятии решений от самой функции, введя json-объект и используя силу словаря. Ниже приведен рабочий пример с предлагаемыми улучшениями:

function change(StateTransitions){
    setInterval(function() {
        var textSpan = $('#aboutUsText');
        var state = textSpan.data('state');
        textSpan.text(StateTransitions[state]["text"]);
        textSpan.data("state",StateTransitions[state]["state"]);
        if(StateTransitions[state]["fadeIn"]){
            textSpan.prop("hidden", true);
            textSpan.fadeIn("slow");
        }            
    }, 3000);
}
change({
    "2":{
        "state": "1",
        "text" : "Text 1",
        "fadeIn" : true
    },
    "3":{
        "state": "2",
        "text" : "Text 2"
    },
    "1":{
        "state": "3",
        "text" : "Text 3"
    },

});

Вы можете найти jsfiddle здесь

MD. Sahib Bin Mahboob · Answer 2 · 2014-04-30T16-55-00.000Z

Ваш элемент уже отображается. Таким образом, нет возможности перепродать его. Сначала вам нужно скрыть <p> затем применить fadeIn(). Попробуйте этот обновленный пример:

    function change(){
        setInterval(function() {
        var textSpan = $('#aboutUsText');
        if (textSpan.attr("MyState")=="2"){
            //I have added the line below
            textSpan.prop('hidden',true);
            textSpan.fadeIn("slow");
            textSpan.text('Text 1');
            textSpan.attr("MyState", "1");
        }else if (textSpan.attr("MyState")=="3"){
            textSpan.text('Text 2');
            textSpan.attr("MyState", "2");
        }else{
            textSpan.text('Text3');
            textSpan.attr("MyState", "3");
        }
        }, 3000);
    }
    change();

Вы также можете найти обновленный jsfiddle здесь

ajm · Answer 3 · 2014-04-30T16-47-00.000Z

С вашим кодом было несколько вещей, которые мешали тексту затухать.

#aboutUsText не имеет opacity установленной через CSS, поэтому он уже был полностью непрозрачен, и ничего не было fadeIn для fadeIn.
fadeIn обычно ожидает, что ваш элемент будет display: none; задавать; так как у вас был абзац уровня блока, fadeIn тоже здесь нечего делать.
Атрибут, который вы пытались проверить, не был ни в одном из примеров, поэтому ваш чек всегда будет терпеть неудачу.

Здесь работает скрипка, которая исчезает в этом тексте. Заметьте, что я изменил несколько вещей:

Я использовал data- для хранения вашего состояния. Это предпочтительный способ хранения произвольных данных по данному элементу в соответствии с спецификацией HTML.
Я добавил opacity к #aboutUsText чтобы он мог где-то исчезать.
Я использовал fadeTo вместо fadeIn, так как ваш элемент является блочным уровнем и отображается.

Я также использовал оператор switch вместо if/else, так как считаю, что это немного читаемо, но это вопрос личных предпочтений.

Счастливое выцветание!