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方法获取列表中的各个项目，并相应地执行动画。

Here's an example of the following.

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

你能不在你的搜索div中添加一个类？这肯定是最优雅的解决方案！然后你会这样做：

$（ “＃搜索框”）。单击（函数（）{ $（ 'SEARCH_TEXT'）停止（真，真）.hide（）。 $（ 'free_search_help'）停止（真，真）.hide（）。 }）;

Answer 3

将一个类添加到“search_text_？”元素和“free_search_help_？”元素并使用该类来“停止（真实，真实）.hide（）”。

或使用：

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

或：

我会整理和优化代码，首先将变量分配给相关元素，然后使用这些变量，而不是让jQuery每次都找到元素。 e.g。

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....

此致尼尔

这个jQuery动画代码可以变得更优雅吗？

3 个答案: