我的代碼:jQuery - 「預加載」(setinterval)的效果?
jQuery(img).each(function() {
jQuery(this).animate({opacity: 0});
jQuery(this).animate({opacity: 1},4000);
});
的代碼修改圖像的不透明度爲0,然後到1點是它發生的所有圖像,而我希望它在當時一個形象的工作。
任何想法如何實現這一目標?
我的代碼:jQuery - 「預加載」(setinterval)的效果?
jQuery(img).each(function() {
jQuery(this).animate({opacity: 0});
jQuery(this).animate({opacity: 1},4000);
});
的代碼修改圖像的不透明度爲0,然後到1點是它發生的所有圖像,而我希望它在當時一個形象的工作。
任何想法如何實現這一目標?
好吧,這是我在它刺傷。
var duration = 1000;
$('img').css('opacity', 0).each(function(i)
{
$(this).delay(i*duration).animate({opacity: 1}, duration);
});
jQuery('img').css('opacity', 0).each(function(i) {
jQuery(this).animate({opacity: 0}, i * 1000);
jQuery(this).animate({opacity: 1}, 1000);
});
http://jsfiddle.net/Squeegy/9J54u/4/
這將在一個圖像褪色,每4秒,直到全部褪。
這工作,因爲每個數組到你的迭代函數索引通過。並且您可以使用該索引作爲淡入之前的偏移量。
我很確定你想把第一個'.animate()'調用改成'.css('opacity',0);'。 – 2011-04-29 01:43:21
@Matt Ball,的確你是對的謝謝。 – 2011-04-29 01:44:08
http://jsfiddle.net/userdude/9J54u/1/ – 2011-04-29 01:44:18
下面是如何讓每個圖像逐漸淡入的示例。當第一個圖像完成淡入時,第二個圖像開始,依此類推。
$(img).each(function(i) {
$(this).css('opacity', 0);
});
doAnim(img, 0);
function doAnim(items, i) {
if (i > items.length) return;
$(items[i]).animate({
opacity: 1
}, {
complete: function() {
doAnim(items, i + 1);
}
});
}
你就可以開始使用顯示:無,而不是做動畫不透明度0? – turtlepick 2011-04-29 01:39:11