Question

对于jQuery来说，这是一个相当新的东西，我已经想出了一些可以工作的动画代码，但它看起来非常难看。

function help() {

    $("#searchBox").click(function(){
        $( #search_text_1 ).stop(true,true).hide();
        $( #search_text_2 ).stop(true,true).hide();
        $( #search_text_3 ).stop(true,true).hide();
        $( #search_text_4 ).stop(true,true).hide();
        $( #search_text_5 ).stop(true,true).hide();
        $( #free_search_help_1 ).stop(true,true).hide();
        $( #free_search_help_2 ).stop(true,true).hide();
        $( #free_search_help_3 ).stop(true,true).hide();
        $( #free_search_help_4 ).stop(true,true).hide();
        $( #free_search_help_5 ).stop(true,true).hide();
  });

    $( #search_text_1 ).delay(1000).fadeIn(500).delay(4000).fadeOut(500, function() {
        $( #search_text_2 ).fadeIn(500).delay(4000).fadeOut(500, function() {
            $( #search_text_3 ).fadeIn(500).delay(4000).fadeOut(500, function() {
                $( #search_text_4 ).fadeIn(500).delay(4000).fadeOut(500, function() {
                    $( #search_text_5 ).fadeIn(500);
                });
            });
        });
    });

    $( #free_search_help_1 ).delay(1000).fadeIn(500).delay(4000).fadeOut(500, function() {
        $( #free_search_help_2 ).fadeIn(500).delay(4000).fadeOut(500, function() {
            $( #free_search_help_3 ).fadeIn(500).delay(4000).fadeOut(500, function() {
                $( #free_search_help_4 ).fadeIn(500).delay(4000).fadeOut(500, function() {
                    $( #free_search_help_5 ).fadeIn(500);
                });
            });
        });
    });

}

我特别关注点击函数来停止动画，这对我来说有点棘手。我确实尝试过对一个分配给所有动画的div的类调用.stop（），但这似乎不起作用（没有错误）。

我还尝试过：

$("div:animated").stop(true,true);

但只有当点击发生在淡入淡出期间，而不是延迟时，这才有效。

Answer 1

您可以使用带选择器的开始^=^DOCS获取以id开头的元素列表。然后可以使用for循环和.eq（）^DOCS方法来获取列表中的各个项目，并相应地执行它们的动画。

下面是一个例子。

function help() {
    var $st  = $( [id^="search_text_"] ),
        $fsh = $( [id^="free_search_help_"] );

    $("#searchBox").click(function() {
        $st.stop(true, true).hide();
        $fsh.stop(true, true).hide();
    });

    for (var i = 0; i < $st.length; i++) {
        var tDelay = 1000 + 5000*i;
        $st.eq(i).delay(tDelay).fadeIn(500).delay(4000).fadeOut(500);
        $fsh.eq(i).delay(tDelay).fadeIn(500).delay(4000).fadeOut(500);
    }
}

Answer 2

Can you not add a class to your search divs? That would be for sure the most elegant solution! Then you would do this:

$("#searchBox").click(function(){ $( .search_text ).stop(true,true).hide(); $( .free_search_help ).stop(true,true).hide(); });

Answer 3

向“search_text_？”元素和“free_search_help.？”元素添加一个类，并使用该类来“stop（true，true）.hide（）”。

或使用：

$( div[id^=search_text]      ).stop(true, true).hide();
$( div[id^=free_search_help] ).stop(true, true).hide();

或：

我会通过首先将变量分配给相关元素，然后使用这些变量来整理和优化代码，而不是每次都让jQuery来定位元素。例如。

var $s[6], $f[6], i = 1;

while (i < 6) {
    $s[i  ] = $( #search_text_       + i);
    $f[i  ] = $( #free_search_help_  + i);
    $f[i  ].stop(true, true) hide();
    $s[i++].stop(true, true).hide();
}

$s[1].delay(....   etc.....
    $s[2].fadeIn(....    etc.....
        $s[3].fadeIn(....    etc.....
            $s[4].fadeIn(....    etc.....
                $s[5].fadeIn(....    etc....

Regards Neil

友情链接