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

相当新的jQuery，我想出了一些动画代码，但它看起来很丑。这个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); 
       }); 
      }); 
     }); 
    }); 

}

我特别关注点击功能来停止动画，对我来说似乎有点哈。我曾尝试调用.stop（）分配给所有正在动画的div的类，但这似乎不起作用（没有错误）。

我也试过：

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

但这只有在点击变淡期间发生的事情，而不是拖延工作。

来源

2011-02-06 pingu

您可以使用开始与选择^=^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); 
    } 
}

来源

2011-02-06 16:09:27 mVChr

你不能为你的搜索div添加一个类吗？这将是肯定的最优雅的解决方案！然后，你可以这样做：

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

来源

2011-02-06 15:27:24 Erwan

我试过了，没用。 – pingu 2011-02-06 17:47:37

添加一个类到“search_text_？”元素和“free_search_help_？”元素并使用该类来“停止（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....

问候尼尔

来源

2011-02-06 15:58:01 Neil

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

回答

相关问题