jquery - 使用 .stop() 方法停止动画

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

我想推荐一个干净的插件

暂停/恢复动画（动画）

$(...).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();