jQuery - 「預加載」（setinterval）的效果？

我的代碼：jQuery - 「預加載」（setinterval）的效果？

jQuery(img).each(function() { 
     jQuery(this).animate({opacity: 0}); 
     jQuery(this).animate({opacity: 1},4000); 
    });

的代碼修改圖像的不透明度爲0，然後到1點是它發生的所有圖像，而我希望它在當時一個形象的工作。

任何想法如何實現這一目標？

來源

2011-04-29 Wordpressor

你就可以開始使用顯示：無，而不是做動畫不透明度0？ – turtlepick 2011-04-29 01:39:11

好吧，這是我在它刺傷。

var duration = 1000; 
$('img').css('opacity', 0).each(function(i) 
{ 
    $(this).delay(i*duration).animate({opacity: 1}, duration); 
});

Demo demo demo

來源

2011-04-29 02:18:09

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秒，直到全部褪。

這工作，因爲每個數組到你的迭代函數索引通過。並且您可以使用該索引作爲淡入之前的偏移量。

來源

2011-04-29 01:41:29

我很確定你想把第一個'.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); 
     } 
    }); 
}

Here's a live demo.

來源

2011-04-29 01:57:59 josh3736

jQuery - 「預加載」（setinterval）的效果？

回答

相關問題