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幻灯片播放多张幻灯片

回答

相关问题