javascript - JqueryAnimate-アニメーションの途中で関数をトリガーします

Question

アニメーションの途中で関数をトリガーすることは可能ですか？

アニメーションには、画像を上から下にスワイプするソリッドブロックが含まれています-画像が完全に覆われた時点で関数をトリガーし、HTMLから画像を削除します（アニメーションの途中）

私の現在の機能は-

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

画像は800pxポイントで完全に覆われています-このプロパティにアクセスして関数をトリガーできますか？

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);
});