Question

小提琴：https://jsfiddle.net/jzhang172/mofnf7ua/1/

它可能只是在我的屏幕上滞后，但似乎完成在我的动画完成之前发射。我的代码是否存在问题，如果有问题，我该如何纠正它以便达到预期效果？

＆＃13;

$(function(){

$(".hey").click(function(){ 
     var height=$(".two").height(); 

     console.log(height);
     if (height >400){
         $(".two").animate({
               height:"0px",
               opacity:0
          },
          {
            duration:1000,
            complete:function(){
            alert('hey');
           }
         });
     }//ifstatement end
     else {
         $(".two").animate({
            height:"500px",
           opacity:1
         });
   }
 });//clickfunction end
});//function end

＆＃13;

.hey{
  background:blue;
  height:50px;
  width:50px;
  transition:1s;
   
}
.two{
  background:red;
    height:500px;
  width:500px;
  transition:1s;
}
.no{
    opacity:1;
display:block;
  transition:1s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="hey"></div>

<div class="hey two" id="two">fffffffff</div>

＆＃13;

Answer 1

原因是你添加了transition:1s;的CSS。如果你删除它将工作正常。

animate()方法执行一组CSS属性的自定义动画。此方法使用CSS样式将元素从一种状态更改为另一种状态。 CSS属性值逐渐更改，以创建动画效果。

动画值的默认速度为400毫秒。

如果你想为动画添加一个spped，你可以通过jQuery animate()本身给它。

工作演示

$(function() {

  $(".hey").click(function() {
    var height = $(".two").height();

    console.log(height);
    if (height > 400) {
      $(".two").animate({
        height: "0px",
        opacity: 0
      }, {
        duration: 1000,
        complete: function() {
          alert('hey');
        }
      });
    } //ifstatement end
    else {
      $(".two").animate({
        height: "500px",
        opacity: 1


      });
    }
  }); //clickfunction end


}); //function end

.hey {
  background: blue;
  height: 50px;
  width: 50px;
  //transition: 1s;

}
.two {
  background: red;
  height: 500px;
  width: 500px;
  // transition: 1s;

}
.no {
  opacity: 1;
  display: block;
  transition: 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="hey"></div>

<div class="hey two" id="two">fffffffff</div>

jQuery animation在事件完成之前完成触发

1 个答案: