延遲jQuery slideToggle動畫

我有一個自定義手風琴菜單。要在菜單中顯示第二級選項，我選擇使用slideToggle()。出於某種原因，他們點擊時和動畫發生時間之間存在延遲。延遲jQuery slideToggle動畫

enter image description here

當與同一頁面上的其他手風琴菜單對比看出這是顯而易見的......我發現，綁定（上單擊）功能菜單項被立即執行。問題是slideToggle動畫似乎遲於它應該開始。

我相信這可能會發生，因爲我的目標是調用slideToggle()的元素。

  var $expandableMenu = $(".expandable .level1"); 

      $expandableMenu.bind('click', function() { 

       $(this).next().slideToggle(200, function() { 
        $(this).parent().toggleClass("opened"); 
       }); 

      });

也許問題是，$(this).next()是目標，我需要上使用slideToggle()元素緩慢的方式？

你的想法是什麼？

編輯：我做了一個jsFiddle測試用例......奇怪的是這個問題在這裏沒有發生。 http://jsfiddle.net/nYZNP仍在尋找問題。

來源

2013-07-31 Chris Bier

+1僅適用於動畫！這是解釋問題的好方法。 –

您是否介意發佈[jsfiddle]（http://jsfiddle.net），以便我們更好地測試您的問題？此外，相關的標記也是有用的。謝謝！標記和 –

的jsfiddle副本的jQuery：http://jsfiddle.net/nYZNP/奇怪的是，並沒有發生在搗鼓問題....嗯.. –

  $(this).next().slideToggle(200, "linear", function() { 
       $(this).parent().toggleClass("opened"); 
      });

您是否嘗試過使用不同的緩動選項？

此外，如果您在移動設備上遇到此問題，則延遲可能是移動設備處理可能具有50ms或更長的固有延遲的點擊事件的一部分。

來源

2013-08-02 14:50:17 carter

如果你想這樣的移動設備上，它確實可能需要更長的時間，動畫開始，因爲該設備正在等待（甚至爲200ms +），以確保您不嘗試進行雙擊。如果是這種情況，你可以去像zepto.js這樣的圖書館，它有一個點擊事件或fastclick.js模擬點擊事件。

就選擇器性能而言，$(this).parent()應該沒問題。然而，在這種情況下，可以通過不寫和一讀該變量，這樣消除幾毫秒：

 $(".expandable .level1").bind('click', function() { 

      $(this).next().slideToggle(200, function() { 
       $(this).parent().toggleClass("opened"); 
      }); 
     });

此外，「在jQuery 1.7中，。對（）方法是用於安裝優選的方法事件處理程序到文檔「。（jQuery api）。換句話說，bind()已棄用！

;最後是通過標籤名稱篩選比通過類名或ID更快的一般規則，所以$("li.expandable .level1")應該比$(".expandable .level1")更快。

也許你也可以更具體地瞭解一些具體的情況，比如瀏覽器/設備或者其他與你的小提琴不同的地方？

來源

2013-12-10 08:23:04 BenMann

替代fastclick回購是從GitHub的「dave1010」，這我更喜歡。您可以在這裏以交互方式查看常規和fastclick（如果有）的區別： http://3oheme.com/blog/2013/08/10/apply-fast-click-for-ios-to-your-website.html –

延遲jQuery slideToggle動畫

回答

相關問題