開始已通過X毫秒後沿動畫

我有一個對象動畫，我想開始淡出，在一定的時間段後褪色的對象。換句話說，當一個物體從屏幕的頂部移動到底部時，大約有75％開始淡出。開始已通過X毫秒後沿動畫

例如，我的職責是迄今爲止：

function parachute_drop(drop_object, animation_duration) { 

var life = animation_duration * .75; 

$(drop_object) 
    .animate({top: "750px"},animation_duration) 
    .animate({top:"-150px", opacity: 100 
    },{ 
     duration: 0, 
     complete: function(){ 
      parachute_drop(drop_object,animation_duration); 
     } 

    }); 


}

因此，如果我是運行：

parachute_drop('#parachute1',100000);

然後 '生命' 已經達到之後（100000 X .75）在= 75000ms它將開始淡出爲0.之後動畫完成，並返回完全不透明狀態。

我一直在努力做到這一點，還沒有完全得到我的頭周圍的整個隊列系統使用jQuery是如何工作的。

我知道我可以把這樣的：

delay(life).animate({opacity:0},5000)

在那裏

，但後來它支撐着整個功能。

你會如何解決這個問題？

來源

2012-03-03 willdanceforfun

您可以使用step函數在動畫繼續時更新透明度。這裏有一個例子：http://jsfiddle.net/imsky/qaLVS/

給出下面的HTML和CSS：

<img src="http://placekitten.com/300/300" id="box"> 

#box {position:absolute;top:10px;left:20px}

下面的jQuery代碼只要3/4度閾值時更新不透明度：

$(function() { 
    var h = $(window).height(); 
    var t = function() { 
     return h - (+$("#box").offset().top) 
    }; 
    $("#box").animate({ 
     "top": h + "px" 
    }, { 
     duration: 5000, 
     step: function() { 
      if(t()/h < 0.75){ 
      $(this).css("opacity",(t()/(h*0.75))); 
      } 
      } 
     }); 
    });

你可以也觸發一次性動畫和嘗試獲得動畫定時來匹配，如果階躍函數的做法是太波濤洶涌：http://jsfiddle.net/imsky/qaLVS/1/

$(function() { 
    var h = $(window).height(); 
    var t = function() { 
     return h - (+$("#box").offset().top) 
    }; 
    $("#box").one("fade", function() { 
     $(this).animate({ 
      "opacity": 0 
     }, { 
      "queue": false, 
      "duration": 0.75 * 5000 
     }); 
    }); 
    $("#box").animate({ 
     "top": h + "px" 
    }, { 
     duration: 5000, 
     step: function() { 
      if (t()/h < 0.75) { 
       $(this).trigger("fade"); 
      } 
     } 
    }); 
});

來源

2012-03-04 00:26:35 imsky

感謝您的支持。我一直在想這步功能是什麼......我會看看它是如何工作的！ – willdanceforfun 2012-03-04 03:37:31

你可以使用的setInterval或遞歸函數與setTimeout的繼續檢查元素的位置，一旦動畫開始......說的每1-200ms。當點擊觸發點清除計時器並開始褪色時，檢查總距離/行進距離的百分比很簡單

來源

2012-03-04 00:23:19 charlietfl

開始已通過X毫秒後沿動畫

回答

相關問題