jQuery幻燈片播放多張幻燈片

我正在尋找使用jQuery向下滑動一個元素，等待，然後將其滑回備份。jQuery幻燈片播放多張幻燈片

當我使用下面的代碼時，它可以很好地滑動，但當滑回來時它似乎可以上下滑動多次。

HTML：

<div id="area"> 
    <div id="summary"><p>hello summary</p></div> 
    <div id="dropdown"> 
     <div class="item"><p>hello item</p></div> 
     <div id="functions"><p>hello functions</p></div> 
    </div> 
</div> 

<p><a href="#" id="test_add">TEST ADD</a></p>

的jQuery：

$("document").ready(function() { 
    $("#test_add").bind("click", add_item_annimate) 
}) 

function add_item_annimate() { 
    $("#dropdown").slideDown("fast").delay(1500).slideUp("fast"); 
}

真的不知道爲什麼發生這種情況。

來源

2014-11-05 hojkoff

你使用的是什麼版本的jQuery？ – Keeleon 2014-11-05 13:44:41

你應該嘗試添加事件到你的'add_item_animate'函數，然後'event.preventDefault（）'，因爲它可能觸發多個元素。否則，它永遠不會做壞事。 – somethinghere 2014-11-05 13:48:12

嘗試一下event.preventDefault（），我在Mozilla 33中使用你的代碼，使用Jquery 1.6-2.1的Chrome 38，我不能重現你的錯誤。你的代碼中是否還有其他的函數調用函數？ – Arleal 2014-11-05 13:51:07

這可能是因爲動畫隊列，清除它，你可以使用stop方法：

$("#dropdown").stop(true).slideDown("fast").delay(1500).slideUp("fast");

來源

2014-11-05 13:49:40 undefined

此代碼應該做的伎倆！

$("document").ready(function() { 
      $("#test_add").click(function(){ 
       $("#dropdown").slideUp("fast").delay(1500).slideDown("fast"); 
       //SlideUp and slideDown can be switched. 
      }); 
      });

例子： http://jsfiddle.net/xcm8n1s3/

來源

2014-11-05 13:51:52 HarrieDakpan

你沒有什麼阻止用戶點擊動畫完成之前「TEST ADD」多次。

if ($("#dropdown").is(':animated')) { 
    return false; 
} 

$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");

這裏是jsfiddle的工作演示。

來源

2014-11-05 13:51:53 Keeleon

jQuery幻燈片播放多張幻燈片

回答

相關問題