Question

我想连续动画这些点。如果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;
}

Answer 1

好吧，.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);
});

如果您可以发布代码的小提琴，我可以尝试给您一个例子：）

Answer 2

    MSBuild MyApp.sln /t:Rebuild /p:Configuration=Release
    MSBuild MyApp.csproj /t:Clean
                         /p:Configuration=Debug;TargetFrameworkVersion=v3.5

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;
}

如何使用jQuery连续动画？

2 个答案: