這個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動畫代碼可以更優雅嗎？

回答

相關問題