在最后一次迭代中改变每个（）函数中的变量值 - jQuery

时间：2017-06-30 06:46:12

标签： javascript jquery animation each

这是我的小提琴link。

所以我将有多个步骤，应该逐个动画。为了让它们逐个动画，我使用了一些flag变量。根据其值，相应的步骤应该是动画的。

但是有一个问题 - 它的价值在第一步没有改变，这就是为什么当你点击2（从时间轴）时，只有第一步是动画。当我在每个（）函数中逐个动画每个箭头并且在最后一次箭头迭代中更改flag变量值时，问题出在下面的部分：

var flag = 0;
function step_1(){
    jQuery(".step_1_nav").addClass('active_bullet_point');
    jQuery(".step_1 .label").addClass('active_label_text');

    var delay = 0;
    jQuery('.step_1 .arrows span').each(function(index) {
        var $this = $(this);
        var total = $('.step_1 .arrows span').length;
        $this.delay(delay).animate({opacity:1}, 100, function(){
            $this.addClass('white_animated_arrow');
            if (index === (total - 1)) {
                jQuery(".step_1 .bullet_point").addClass('active_bullet_point');
                flag = 1;
            }
        });
        delay += 100;
    });
}

jQuery(".step_2_nav").click(function(){
    step_1();
    console.log(flag); /* here flag returns 0 instead of 1 */
    step_2();
});

当我放置这部分时

if (index === (total - 1)) {
    jQuery(".step_1 .bullet_point").addClass('active_bullet_point');
    flag = 1;
}

out of animate回调函数标记的值被更改为1但它立即发生而不等待最后一次箭头的迭代，并且所有2个步骤都立即被动画化。

我在这里失踪了什么？有什么想法吗？

5 个答案:

答案 0 :(得分：1)

我使用 setInterval（）

制作

<强> JS FIDDLE DEMO 

var counter_step1 = 0;
var counter_step2 = 0;
var step1Completed = false;
var timeDelay = 400; // set delay time accordingly

function step1() {

  $(".step_1 .label").addClass("active_label_text");
  var arrowCount = $(".arrows_down span").size();
  var myFisrt = setInterval(function() {
    if (counter_step1 < arrowCount) {
      counter_step1++
      $(".arrows_down span:nth-child(" + counter_step1 + ")").addClass("white_animated_arrow");
    } else {
      $(".step_1 .bullet_point").addClass("active_bullet_point");
      step1Completed = true;
      clearInterval(myFisrt);
    }
  }, timeDelay);
}


function step2() {
  var arrowCount = $(".arrows_up span").size();
  var mySecond = setInterval(function() {
    if (step1Completed) {
      $(".step_2 .label").addClass("active_label_text");
      if (arrowCount > counter_step2) {
        $(".arrows_up span:nth-child(" + arrowCount + ")").addClass("white_animated_arrow");
        arrowCount--
      } else {
        $(".step_2 .bullet_point").addClass("active_bullet_point");
        clearInterval(mySecond);
      }
    }
  }, timeDelay);
}

function setAnimation(myVALUE) {
  step1();
  if (myVALUE == "STEP2") { step2();  }
}

$(".step_1_nav").on('click', function() {
  setAnimation("STEP1");
});

$(".step_2_nav").on('click', function() {
  setAnimation("STEP2");
});

访问： For jQuery Tutorials

答案 1 :(得分：0)

不确定我是否理解得很好。当步骤2是反向运行的动画时，你想要的是什么，对吧？

您可以使用jQuery reverse（）来实现此目的，如下所示：

jQuery(jQuery('.step_2 .arrows span').get().reverse()).each();


var flag = 0;
function step_1(){    
    jQuery(".step_1_nav").addClass('active_bullet_point');
    jQuery(".step_1 .label").addClass('active_label_text');

    var delay = 0;
    jQuery('.step_1 .arrows span').each(function(index) {
        var $this = $(this);
        var total = $('.step_1 .arrows span').length;
        $this.delay(delay).animate({opacity:1}, 100, function(){
            $this.addClass('white_animated_arrow');
            if (index === (total - 1)) {
                jQuery(".step_1 .bullet_point").addClass('active_bullet_point');
                flag = 1;
            }
        });
        delay += 100;
    });
}

function step_2(){
    if(flag == 1){
        jQuery(".step_2_nav").addClass('active_bullet_point');
        jQuery(".step_2 .label").addClass('active_label_text');

        var delay = 0;
        jQuery('.step_2 .arrows span').each(function(index) {
            var $this = $(this);
            var total = $('.step_2 .arrows span').length;
            $this.delay(delay).animate({opacity:1}, 100, function(){
                $this.addClass('white_animated_arrow');
                if (index === (total - 1)) {
                    jQuery(".step_2 .bullet_point").addClass('active_bullet_point');
                    flag = 1;
                }
            });
            delay += 100;
        });
    }
}

jQuery(".step_1_nav").click(function(){
    step_1();
});

jQuery(".step_2_nav").click(function(){
    step_1();
    flag = 1;
    console.log(flag);
    step_2();
});
.step {
  margin-right:30px;
  display:inline-block;
  vertical-align:top;
  text-align:center;
  margin-top:20px;
  margin-left:20px;
}
.arrows {
  width:10px;
  display:inline-block;
  vertical-align:top;
}
.arrows_up {
}
.arrows span {
    border: solid #000;
    border-width: 0 2px 2px 0;
    display: block;
    padding: 4px;
    margin-bottom: 4px;
    width: 0;
    height: 0;
    -webkit-transition: border-color 0.4s;
    -moz-transition: border-color 0.4s;
    transition: border-color 0.4s;
}
.arrows_down span {
    transform: rotate(135deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.arrows_up span {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
}
.label {
  color:#000;
  margin-bottom:10px;
  font-weight:bold;
  display:block;
  font-family:'Arial';
}
.bullet_point span {
    font-family:'Arial';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #000;
    display: inline-block;
    vertical-align: middle;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}
.step_2 .bullet_point {
  margin-bottom:15px;
}
.step_2 .label {
  margin-top:5px;
}
.active_label_text {
  color:red;
}
span.white_animated_arrow {
    border-color: red;
}
.timer_nav {
  margin-top:20px;
  margin-left:0px;
}
.timer_nav  span.timeline {
  color:#000 !important;
  cursor:text;
}
.timer_nav span {
  color:#000;
  font-size:20px;
  cursor:pointer;
  font-family:'Arial';
  font-weight:bold;
  margin:0px 10px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}
.timer_nav span:hover {
  color:red;
}
.active_bullet_point {
  color:red;
}
.timer_nav span.active_bullet_point {
  color:red;
}
.active_bullet_point span {
  background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step step_1">
  <span class="label">STEP 1</span>
  <div class="arrows arrows_down">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="bullet_point"><span></span></div>
</div>

<div class="step step_2">
  <div class="bullet_point"><span></span></div> 
  <div class="arrows arrows_up">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <span class="label">STEP 2</span>
</div>

<div class="timer_nav">
  <span class="timeline">Timeline</span>
  <span class="step_1_nav">1</span>
  <span class="step_2_nav">2</span>
</div>

答案 2 :(得分：0)

指定匿名回调，并让step_1接受它：

function step_1(callback){
    if(!callback) callback =function(){};
    jQuery(".step_1_nav").addClass('active_bullet_point');
    jQuery(".step_1 .label").addClass('active_label_text');

    var delay = 0;
    jQuery('.step_1 .arrows span').each(function(index) {
        var $this = $(this);
        var total = $('.step_1 .arrows span').length;
        $this.delay(delay).animate({opacity:1}, 100, function(){
            $this.addClass('white_animated_arrow');
            if (index === (total - 1)) {
                jQuery(".step_1 .bullet_point").addClass('active_bullet_point');
                callback();
            }
        });
        delay += 100;
    });
}

并称之为：

jQuery(".step_2_nav").click(function(){
    step_1(step_2);
});

这是fiddle

答案 3 :(得分：0)

这类似于非同步动画，您可以在step2完成后调用step1，意味着在步骤1中将其放入回调函数中。
我设置了setTimeout，因为看起来你有额外的转换，它会让你的step1呼叫更长。

    function step_1(child) {
        jQuery(".step_1_nav").addClass('active_bullet_point');
        jQuery(".step_1 .label").addClass('active_label_text');

        var delay = 0;
        jQuery('.step_1 .arrows span').each(function(index) {
            var $this = $(this);
            var total = $('.step_1 .arrows span').length;
            $this.animate({
                opacity: 1
            }, delay, function() {
                $this.addClass('white_animated_arrow');
                if (index === (total - 1)) {
                    jQuery(".step_1 .bullet_point").addClass('active_bullet_point');
                    if(child) setTimeout(()=> step_2(), 300);
                }
            });
            delay += 100;
        });
    }

    function step_2() {
        // if (flag == 1) {
            jQuery(".step_2_nav").addClass('active_bullet_point');
            jQuery(".step_2 .label").addClass('active_label_text');

            var delay = 0;
            jQuery('.step_2 .arrows span').each(function(index) {
                var $this = $(this);
                var total = $('.step_2 .arrows span').length;
                $this.delay(delay).animate({
                    opacity: 1
                }, 100, function() {
                    $this.addClass('white_animated_arrow');
                    if (index === (total - 1)) {
                        jQuery(".step_2 .bullet_point").addClass('active_bullet_point');
                    }
                });
                delay += 100;
            });
        // }
    }

    jQuery(".step_1_nav").click(function() {
        step_1();
    });

    jQuery(".step_2_nav").click(function() {
        step_1(true);
    });
.step {
        margin-right: 30px;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        margin-top: 20px;
        margin-left: 20px;
    }
    
    .arrows {
        width: 10px;
        display: inline-block;
        vertical-align: top;
    }
    
    .arrows_up {}
    
    .arrows span {
        border: solid #000;
        border-width: 0 2px 2px 0;
        display: block;
        padding: 4px;
        margin-bottom: 4px;
        width: 0;
        height: 0;
        -webkit-transition: border-color 0.4s;
        -moz-transition: border-color 0.4s;
        transition: border-color 0.4s;
    }
    
    .arrows_down span {
        transform: rotate(135deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
    }
    
    .arrows_up span {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
    }
    
    .label {
        color: #000;
        margin-bottom: 10px;
        font-weight: bold;
        display: block;
        font-family: 'Arial';
    }
    
    .bullet_point span {
        font-family: 'Arial';
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #000;
        display: inline-block;
        vertical-align: middle;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
    }
    
    .step_2 .bullet_point {
        margin-bottom: 15px;
    }
    
    .step_2 .label {
        margin-top: 5px;
    }
    
    .active_label_text {
        color: red;
    }
    
    span.white_animated_arrow {
        border-color: red;
    }
    
    .timer_nav {
        margin-top: 20px;
        margin-left: 0px;
    }
    
    .timer_nav span.timeline {
        color: #000 !important;
        cursor: text;
    }
    
    .timer_nav span {
        color: #000;
        font-size: 20px;
        cursor: pointer;
        font-family: 'Arial';
        font-weight: bold;
        margin: 0px 10px;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
    }
    
    .timer_nav span:hover {
        color: red;
    }
    
    .active_bullet_point {
        color: red;
    }
    
    .timer_nav span.active_bullet_point {
        color: red;
    }
    
    .active_bullet_point span {
        background: red;
    }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step step_1">
        <span class="label">STEP 1</span>
        <div class="arrows arrows_down">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="bullet_point"><span></span></div>
    </div>
    <div class="step step_2">
        <div class="bullet_point"><span></span></div>
        <div class="arrows arrows_up">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <span class="label">STEP 2</span>
    </div>
    <div class="timer_nav">
        <span class="timeline">Timeline</span>
        <span class="step_1_nav">1</span>
        <span class="step_2_nav">2</span>
    </div>
    </div>

答案 4 :(得分：0)

我已经完成了下面这件事，但这不是解决问题的正确方法。

这种情况正在发生，因为JS在step_1（）结束之前没有停止。它不是在等待step_1（）中的'delay'循环并调用step_2（）。如果你将alert（）放在两个函数中，你就会知道。

jQuery(".step_2_nav").click(function(){`enter code here`
      step_1();
      flag=1;
      step_2();
})

您也可以尝试使用 https://api.jquery.com/category/deferred-object/

希望如此有用

相关问题
最新问题