Question

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

动画包括一个从上到下滑动图像的实体块 - 我想在图像被完全覆盖的位置触发一个功能，并从html中移除图像（在动画的中间）< / p>

我目前的职能是 -

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

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

Answer 1

因为jQuery中没有tick计数器，所以你需要“模拟”它：

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

已更新：这是一个使用最少代码的完美解决方案 -

WORKING DEMO

的jQuery -

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

Jquery Animate - 在动画中途触发功能

3 个答案: