Jquery Animate - 通過動畫中途觸發函數

是否可以通過動畫中途觸發函數？Jquery Animate - 通過動畫中途觸發函數

動畫包括一個固體塊，從上到下在圖像上滑動 - 我想在圖像完全覆蓋的位置觸發一個函數，並從html中移除圖像（通過動畫的中途）

我現在的功能是 -

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

圖像完全覆蓋在800像素點 - 我可以訪問此屬性觸發功能？

來源

2013-01-07 Dancer

是的，這是可能的。你可以在http://jsfiddle.net上提供演示嗎？ – undefined

，因爲沒有在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/

來源

2013-01-07 09:58:35 pocesar

現貨 - 非常感謝您的幫助！ – Dancer

_13是Javascript_中可能的最小值？ – undefined

是的，JavaScript中可能的最小間隔。一些瀏覽器允許你下降到8 ...儘管...檢查這個http://www.adequatelygood.com/2010/2/Minimum-Timer-Intervals-in-JavaScript一些瀏覽器甚至強迫它由於性能原因而更高 – pocesar

什麼分裂成動畫2.

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

來源

2013-01-07 10:06:03 Bruno

乾杯布魯諾 - 效果很好，但它會導致動畫暫停 - 客戶端需要連續滑動。 – Dancer

更新：這是一個完美的解決方案，代碼最少 -

WORKING DEMO

jQuery-

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

來源

2013-01-07 10:33:23 Cdeez

嗨 - 非常感謝您的幫助 - 我需要一個連續的動畫 - 這在中途暫停 – Dancer

查看更新隊友。它現在運作良好。 :) – Cdeez

Jquery Animate - 通過動畫中途觸發函數

回答

相關問題