怎么设置停止动画？

逗比式i · 发表于 2018-12-21 11:06:40

老师你好，我这个代码点击“停止动画”按钮只是点击瞬间停止，怎么可以让动画暂停

<head>
<title>自定义动画</title>
<meta charset="utf-8">
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
      $(function(){
         $("button").click(function(){
            $("img").animate({
                  /*left:"100px",
                  top:"100px",*/
                  width:"200px",
                  height:"200px"
            },3000,function(){
                  $("body").append("<p>ppp</p>")
            })
         });
         $("button:eq(1)").click(function(){
            $("img").stop();
         });
      })
</script>
</head>
<body>
<button>动画变化</button><br />
<button>停止动画</button><br />
<img style="width: 100px;height: 100px;position: relative;" src="Penguins.jpg" />
</body>

在学课程：
jQuery框架
http://www.atstudy.com/course/1000

学掌门网校 · 发表于 2018-12-21 11:38:51

同学需要注意语法细节问题，还有区分两个button可以通过id属性来标识一下
具体参考代码如下：

<!DOCTYPE html>
<html>
<head>
<title>自定义动画</title>
<meta charset="utf-8">
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
   $(document).ready(function(){
         $("#start").click(function(){
            $("img").animate({
                  left:"100px",
                  top:"100px",
                  width:"200px",
                  height:"200px"
},5000);
         $("#stop").click(function(){
            $("img").stop();
  });

  });
});
</script>
</head>
<body>

<button id="start">动画变化</button><br/>
<button id="stop">停止动画</button><br/>

<img style="width: 100px;height: 100px;position: relative;" src="Penguins.jpg" />
</body>
</html>

		自动登录	找回密码
密码			(注-册)加入51Testing

[在学] 怎么设置停止动画？

站长推荐 /1