Question

我有以下代码：

$(function(){
    $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
   $("#stop").click(function(){
    $("*:animated").stop();
  });

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}


<button id="stop">Stop sliding</button>
<div id="flip">Click to slide down panel</div>
< div id="panel">Hello world!</div>

上面的代码只停止动画。我想在下一次点击时播放动画，我该怎么办？我是一个完整的初学者。是否有任何jquery方法来简单地启动动画，如果没有任何技巧使用jquery代码而不是css3

Answer 1

我想建议一个干净的插件

PAUSE / RESUME ANIMATION (ANIMATE)

$(...).startAnimation(  params, [duration], [easing], [callback] )
$(...).pauseAnimation()
$(...).resumeAnimation()

Answer 2

不使用插件可以执行以下操作：

<强> jsFiddle

$(document).ready(function () {
    $("#flip").click(function () {
        $('#panel').stop().slideToggle(2000, function () {});
    });
    $("#stop").click(function () {
        $("#panel").stop();
        if ($(this).hasClass("open")) {
            $('#panel').slideUp(2000);
            $(this).removeClass("open");
        }
        $(this).addClass("open");
    });
});

Answer 3

将$("*:animated").stop();更改为$("*:animated").stop().slideUp();

使用.stop（）方法停止动画

3 个答案: