javascript - Jquery Animate - 通过动画中途触发功能

Question

是否可以在动画中途触发功能？

动画包括一个从上到下在图像上滑动的实心块 - 我想在图像被完全覆盖时触发一个函数并从 html 中删除图像（在动画的中途）

我目前的功能是 -

    function animateCover() {
    $('#cover').animate({ bottom: '1400px'}, 4000, function() { });
}

图像在 800 像素点处完全覆盖 - 我可以访问此属性以触发功能吗？

Answer 1

由于 jQuery 中没有刻度计数器，因此您需要“模拟”它：

function animateCover() {
  var  
      $cover = $('#cover'),
      interval = setInterval(function(){
        if ($cover.is(':animated')){
          if (parseInt($cover.css('bottom')) > 800){
             alert('trigger');
             clearInterval(interval);
          }
        } else {
         clearInterval(interval);
        }
      }, 13); // 13 is the minimum possible in Javascript 

  $cover.animate({ bottom: '1400px'}, 4000, function() { $cover.text('done'); });
}

jsFiddle：http: //jsfiddle.net/emV4p/1/

Answer 2

把动画分成2个怎么样。

function animateCover() {
    $('#cover').animate({ bottom: '700px'}, 2000, function() {
        $('#imgID').hide();
        $('#cover').animate({ bottom: '1400px'}, 2000 );
    });
}

Answer 3

更新：这是一个完美工作的解决方案，代码最少 -

工作演示

jQuery-

$(document).ready(function(){
  setInterval(function(){
    $("#image").css('background-image','none');
    },2000);
  $("#block").animate({
    bottom:'400px'
  },3000);
});