Question

动画本身正在运作，但为什么我的完整功能不起作用？

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

$(".ok").animate({
height:"300px"

},{
 duration:2000
 }, {complete:function(){
alert('hey');
}
});

.ok{
  background:blue;
  height:100px;
  width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>

Answer 1

complete属性duration

＆＃13;

$(".ok").animate({
  height: "300px"

}, {
  duration: 2000,
  complete: function() {
    alert('hey');
  }
});

＆＃13;

.ok {
  background: blue;
  height: 100px;
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>

＆＃13;

Answer 2

complete回调应该作为第二个param对象上的方法传递给animate()，而不是作为另一个对象传递。

Updated Fiddle

$(".ok").animate({
  height: "300px"
}, { // <--- Pass `complete` callback as part of this object.
  duration: 2000,
  complete: function() {
    alert('hey');
  }
});

＆＃13;

$(".ok").animate({
  height: "300px"
}, { // <--- Pass `complete` callback as part of this object.
  duration: 2000,
  complete: function() {
    alert('hey');
  }
});

＆＃13;

.ok {
  background: blue;
  height: 100px;
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>

＆＃13;

或者，它也可以作为最后一个参数传递给animate

$(".ok").animate({
    height: "300px"
  }, 2000,
  function() {
    alert('hey');
  }
);

＆＃13;

$(".ok").animate({
    height: "300px"
  }, 2000,
  function() {
    alert('hey');
  }
);

＆＃13;

.ok {
  background: blue;
  height: 100px;
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>

＆＃13;

jQuery动画完全不起作用

2 个答案: