.fadeIn() 似乎仅在附加内容后才起作用

Question

下面是我正在编写的页面的脚本。它工作正常，但我看到 .fadeIn(1000) 有一些非常奇怪的行为。

所以，屏幕中央基本上有一个显示 window，两侧的左右箭头循环显示 div 个包含多项选择题形式的元素。

一切正常。

我希望它很好地淡入淡出，并且每个项目都完美地淡入淡出，但只有在它被附加至少一次之后。

在第一个循环中，当您单击时，就好像 .fadeIn 根本不存在一样，它只是瞬间发生。如果你再次循环，它工作正常。

奇怪的是，这与我在网站不同部分的下拉菜单配合得很好。在该站点上，我使用相同的逻辑：变量包含数字或字符串，单击菜单项会更改变量的值，并通过一堆 if 语句调用函数运行直到一个被发现是真的。

这是我针对问题站点的代码

$(window).load(function() { 
    $(".intro").appendTo('#display_box');

    var questionPosition = 0;

    function clearBox(){
        $("#display_box").children().fadeOut(1000)
        .appendTo('#question_holding')
    };

    function cycle(){
        if (questionPosition == 0) {
            $("#q0").fadeIn(1000).appendTo('#display_box')
            $("#display_box").animate({scrollTop:0},500);
        };

        if (questionPosition == 1) {
            $("#q1").fadeIn(1000).appendTo('#display_box')
            $("#display_box").animate({scrollTop:0},500);
        };

        if (questionPosition == 2) {
            $("#q2").fadeIn(1000).appendTo('#display_box')
            $("#display_box").animate({scrollTop:0},500);
        };

        if (questionPosition == 3) {
            $("#q3").fadeIn(1000).appendTo('#display_box')
            $("#display_box").animate({scrollTop:0},500);
        };

        if (questionPosition == 4) {
            $("#q4").fadeIn(1000).appendTo('#display_box')
            $("#display_box").animate({scrollTop:0},500);
        };
    }

    $('#leftarrow').on('click', function(){
        questionPosition--;
        clearBox();
        cycle();
    });

    $('#rightarrow').on('click', function(){
        questionPosition++;
        clearBox();
        cycle();
    });
});

这是使用与工作站点相同的逻辑的代码示例，您会看到它的想法几乎相同。

function statusCheck(){
    if (status == 0){
        $("#instructions").fadeIn(1000).appendTo("#infoWindow");
        $("#instructions").removeClass("hide");
        $("#infoWindow").animate({scrollTop:0},500);
    } else{}

    if (status == 1){
        $("#worldGrid").fadeIn(1000).appendTo("#mapWindow");
        $("#worldGrid").removeClass("hide");
        $("#worldInfo").fadeIn(1000).appendTo("#infoWindow");
        $("#worldInfo").removeClass("hide");
        $("#infoWindow").animate({scrollTop:0},500);
    } else{}

我对代码还很陌生，但唯一突然想到的是我的原始代码是 if else 语句，然后我发现我真的不需要else，所以在这个较新的页面上我没有包含它。

想法？

Answer 1

永远不要制作一堆编号的 ID 元素。这是最糟糕的方法。太可怕了。

当您觉得自己要将元素的名称与 ID 拼凑在一起时，停止！慢慢离开 id 属性，拿起一个 class 属性。

总是对会多次出现的任何事物使用 class 名称，并且 select selector 并使用 .length 来适应计数，并使用.eq(N) 到 select 第 N 项。

一堆重复的 if 语句是实现这种东西的最糟糕的方法。您应该按数字参考问题，并使用 $('.questions').eq(N) 到 select 第 N 题

问题是你在将它附加到某处之前淡化了它。

var questions = $('.questions'),
    displayBox = $('#display_box');

...
function cycle() {
    questions.eq(questionPosition)
    .appendTo(displayBox)
    .fadeIn(1000);
    displayBox.animate({scrollTop:0}, 500);
}

你有一个很好的一致结构可以使用，但大量重复并不好。有很多不同的行做几乎相同的事情是很容易出错的。这就是变量的用途。它们保存占位符的值。

如果有人告诉您 ID 是 "faster"，那您就被误导了。您不会通过将所有内容硬编码为固定的容易出错的名称来提高速度。您可以通过有效的方式修改文档来提高速度，避免强制浏览器重排，例如将大量项目附加到可见的内容。 $('.questions') selector 启动时查找所花费的时间是一瞬间。

事实上，我的代码要快得多。您的代码会反复查找页面，而我的代码会立即查找一次，然后再也不需要查找了。

如果您使用 questions.length 进行环绕，那么代码也会自动神奇地处理在页面中找到的任意数量的问题元素。

Answer 2

Move your functions out of window load. Replace in cycle() function your if statements with switch. This way if questionPosition goes beyond values 0-4 to fall in the default code-block.

Use clearBox() on load to have the 1000 ms delay from start.

function cycle(questionPosition){
            switch(questionPosition) {
               case 0:
                     $("#q0").fadeIn(1000).appendTo('#display_box');
                     $("#display_box").animate({scrollTop:0},500);
               break;
               case 1:
                     $("#q1").fadeIn(1000).appendTo('#display_box');
                     $("#display_box").animate({scrollTop:0},500);
               break;
               case 2:
                     $("#q2").fadeIn(1000).appendTo('#display_box');
                     $("#display_box").animate({scrollTop:0},500);
               break;
               case 3:
                     $("#q3").fadeIn(1000).appendTo('#display_box');
                     $("#display_box").animate({scrollTop:0},500);
               break;
               case 4:
                     $("#q4").fadeIn(1000).appendTo('#display_box');
                     $("#display_box").animate({scrollTop:0},500);
               break;
               default:
                     $("#q0").fadeIn(1000).appendTo('#display_box');
                     $("#display_box").animate({scrollTop:0},500);
            }                  
    }
    function clearBox(){
    $("#display_box").children().fadeOut(1000).appendTo('#question_holding');
    }
    $(window).load(function() { 
    var questionPosition = 0;
    clearBox();
    $(".intro").appendTo('#display_box');    
    $('#leftarrow').on('click', function(){
        questionPosition--;
        clearBox();
        cycle();
    });   
    $('#rightarrow').on('click', function(){
        questionPosition++;
        clearBox();
        cycle();
    });   
    });

.fadeIn() 似乎仅在附加内容后才起作用

.fadeIn() only seems to work after the content has been appended

jquery

append

fadein