文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用jQuery连续动画？

问如何使用jQuery连续动画？
EN

Stack Overflow用户

提问于 2016-09-03 02:58:44

回答 2查看 132关注 0票数 0

我想把这些点连成一幅动画。如果sample1点为100%，则sample2将动画为100%，那么sample3将是下一个动画。

我正试着写代码，但失败了。我的代码的输出是所有的点一起动画。

这是我的密码

var previous = null;
$(".myblock").each(function(){
  var a = $(this); 
  if(previous){
     a.find("span").animate({ left: "100%"},1000,function(){
      $(this).attr("rel","100");
    });
  }else{
  var d =  $(this).prev().find("span").attr("rel");
     a.find("span").animate({ left: "100%"},1000,function(){
      $(this).attr("rel","100");
    });
  }

  previous = this;

});

如果你有这样的教程。请给我链接。如果这适用于jQuery，我正在做一个实验。

更新

我的html

<div class="block-row">
<div class="myblock">
     <label>sample1</label>
     <div class="block-rate">
       <span></span>
     </div>
</div>
<div class="myblock">
     <label>sample2</label>
        <div class="block-rate">
            <span></span>
        </div>
     </div>
<div class="myblock">
      <label>sample3</label>
        <div class="block-rate">
              <span></span>
        </div>
    </div>
</div>

我的CSS

.block-row{
    margin-top: 40px;
}
.block-rate {
    background: #ccc none repeat scroll 0 0;
    height: 3px;
    position: relative;
}
.myblock{
    margin-bottom: 20px;
}
.block-row label{
    padding-bottom: 10px;
}
.block-rate span{
    display: block;
    position: absolute;
    left: 0;
    top: -10px;
    width: 25px;
    height: 25px;
    border-radius:50%;
    background-color: #000;
}

jquery

animation

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-09-03 03:17:06

var elements = $(".myblock span").toArray().reverse();
var animateNext = function() {
    if(elements.length > 0) {
        $(elements.pop()).animate({ left: "100%"},1000, animateNext);
    }
}
animateNext();

.block-row{
    margin-top: 40px;
}
.block-rate {
    background: #ccc none repeat scroll 0 0;
    height: 3px;
    position: relative;
}
.myblock{
    margin-bottom: 20px;
}
.block-row label{
    padding-bottom: 10px;
}
.block-rate span{
    display: block;
    position: absolute;
    left: 0;
    top: -10px;
    width: 25px;
    height: 25px;
    border-radius:50%;
    background-color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-row">
<div class="myblock">
     <label>sample1</label>
     <div class="block-rate">
       <span></span>
     </div>
</div>
<div class="myblock">
     <label>sample2</label>
        <div class="block-rate">
            <span></span>
        </div>
     </div>
<div class="myblock">
      <label>sample3</label>
        <div class="block-rate">
              <span></span>
        </div>
    </div>
</div>

票数 0

Stack Overflow用户

发布于 2016-09-03 03:07:39

好吧，.animate()和.fadeIn()接受回电话，这样你就可以

$('#div1').animate({top:100}, 1500, function() {
    $('#div2').fadeIn('slow', function() {
        $('#div3').fadeIn('slow');
    });
});

这是我在这里发现的另一个例子，非常简单。请参阅Start animation only after first is done

$('.search-toggle').on('click', function(){
    $("body").animate({ scrollTop: 0 }, "slow", function(){
        $('.search-drawer').slideToggle(); // or fadeIn(), show() ect..
    });
});

您还可以尝试使用.delay()，它可能具有“一个接一个”的效果，如下面的Start animation one after the other

$("span").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

如果你可以发布你的代码，我可以试着给你一个例子:)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39302836

复制

相似问题

问如何使用jQuery连续动画？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery连续动画？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery连续动画？
EN