简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - jquery如何控制animation动画暂停与播放
阿神
阿神 2017-04-11 10:03:00
0
3
375
<p class="scan-gold-pic">
  <img id="animation-pic" src="imgs/images/gold-4.png" width="100%">
  <p class="center-gold-pic"></p>
</p>

我的需求时；给class="center-gold-pic"加一个点击事件；执行动漫效果使上面图片转动起来；转起来的时候向后台发送请求；这个点击事件可以控制暂停与播放；暂停的时候停止发送请求；播放的时候转动又开始发送请求；请问这个应该怎么写；

$(document).ready(function() {

$(".center-gold-pic").on("click",function(){

    $(this).prev().addClass("animantion");
    $.post('ajax.txt', function(data) {
        if(data==1){
        $(".gold-pic-one").css("opacity",'1');
        $(".gold-pic-two").css("opacity",'1');
        $(".gold-pic-three").css("opacity",'1');
        $(".gold-pic-four").css("opacity",'1');
         setTimeout(function(){show();}, 4000);
             }else{
                setTimeout(function(){show1();}, 4000)
                 };
        });
    });

});

这是我自己写的但是没有暂停与播放效果

阿神
阿神

闭关修行中......

全部回覆(3)
左手右手慢动作
左手右手慢动作2017-04-11 10:05:00 3樓 
$(this).prev().addClass("animantion");

改为

$(this).prev().toggleClass("animantion");
點贊 +0
新增回覆
Peter_Zhu
Peter_Zhu2017-04-11 10:05:00 2樓 
$(this).prev().stop();

注意this 作用域

$(".center-gold-pic").prev().stop();
點贊 +0
新增回覆
伊谢尔伦
伊谢尔伦2017-04-11 10:05:00 1樓

一个简单的例子，你可以参考下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .scan-gold-pic{
      padding: 1px 0;
      width: 300px;
      height: 300px;
      background-color: #eee;
    }
    .scan-gold-pic .cc{
      width:150px;
      height: 150px;
      background-color: #005f3c;
      margin: 50px auto;
      animation: revolve 1s linear infinite;
    }
    .scan-gold-pic .center-gold-pic{
      width: 50%;
      line-height: 2em;
      text-align: center;
      background-color: #fff;
      margin: 0 auto
    }
    .scan-gold-pic .center-gold-pic:hover{
      cursor: pointer;
    }
    .cc.stop{
      animation-play-state: paused;
    }

    @keyframes revolve{
      0%{
        transform: rotate3d(0,0,1,0deg);
      }
      100%{
        transform: rotate3d(0,0,1,360deg);
      }
    }


  </style>
</head>
<body>
  <p class="scan-gold-pic">
    <p class="cc stop"></p>
    <p class="center-gold-pic">Go!</p>
  </p>
  <script src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>
  <script>
    $(function(){
      $(".center-gold-pic").on("click",function(){
        $(".cc").toggleClass("stop");
      });
    });
  </script>
</body>
</html>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！