Question

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

因此，屏幕中央基本上是一个显示窗口，左右两侧的箭头循环显示包含多项选择题形式的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语句，然后我发现我真的没有＆＃39;需要else，所以在这个较新的页面上我没有包含它。

思想？

Answer 1

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

当您感觉自己要将带有ID的元素的名称拼凑在一起时，停止！慢慢退出id属性并选择class属性。

始终在多次出现的任何内容上使用类名，并选择该选择器并使用.length来适应计数，并使用.eq(N)选择 N 项目。

一堆重复的if语句是实现这种方式的最糟糕方式。您应该以数字方式引用问题，并使用$('.questions').eq(N)选择问题N。

问题是你在将它附加到某个地方之前就会淡化它。

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

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

你有一个很好的一致结构，但重复的重复并不好。很多错误都很容易让很多不同的行完成同样的事情。这就是变量的用途。他们持有占位符的价值。

如果你被告知身份证“更快”，你就会被误导。你不会通过将所有内容硬编码到修复容易出错的名称来提高速度。通过以有效的方式修改文档来提高速度，避免强制浏览器重排，例如将大量项目附加到可见的内容。启动时$('.questions')选择器查找所花费的时间是一瞬间。

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

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

Answer 2

将您的功能移出窗口加载。   将[{1}}语句替换为cycle()，并if。这样，如果switch超出值0-4，则落入questionPosition代码块。

在加载时使用default从启动开始有1000毫秒的延迟。

clearBox()

.fadeIn（）似乎只在内容被追加后才起作用

2 个答案: