如何讓這個簡單的jQuery工作？

我是jQuery的新手。我正在嘗試創建一個照片牆，在頁面加載時圖像將逐漸淡入。這裏的HTML：如何讓這個簡單的jQuery工作？

<div id="photoWall"> 
    <a href=""><img src="a.jpg" /></a> 
    <a href=""><img src="b.jpg" /></a> 
    <a href=""><img src="c.jpg" /></a> 
</div>

和失敗的jQuery：

$('#photoWall a').hide(); 
$('#photoWall a:eq(0)').fadeIn(); 
if ($('#photoWall a:before:visible')) { 
    $(this).fadeIn(); 
}

我的邏輯是，隱藏包含圖像起初所有鏈接。然後淡入淡出第一個鏈接，然後檢查上一個鏈接是否可見，如果淡入當前鏈接，則依此類推，直到顯示所有鏈接。如何讓這個工作？

來源

2011-06-30 Kaly

There is no :before selector.
一個動畫之後運行，如.fadeOut()後.fadeIn()任何代碼，需要一個回調發生。
這裏沒有循環，所以它只會在第一和第二張圖像中淡入淡出。

這是票友看起來比你得到了什麼，但它也不是太糟糕：

$(function() 
{ 
    function show($links, i) 
    { 
     var $link = $links.eq(i); 
     if (!$link.length) return; 
     $link.fadeIn(function() 
     { 
      show($links, ++i); 
     }); 
    } 

    show($('#photoWall a').hide(), 0); 
});

演示：http://jsfiddle.net/mattball/ECWxM/

來源

2011-06-30 22:26:56

'$ links.get（I）.fadeIn（...'這似乎不工作我想你的意思是使用'.EQ（）' – user113716

@patrick你是對的，我是炸的 - 已經修好了 –

@Matt Ball：糟糕...看起來你還有其他兩個問題，第一個'if（！$ link）return;'應該是'if（！$ link.length）return;'。沒什麼大不了的，因爲回調不會發生，因爲沒有任何東西可以淡入。更嚴重的是你得到一個'Uncaught RangeError：Maximum call堆棧大小超過'，因爲您使用後增加運算符'i ++'而不是預先' ++ i'。當達到調用堆棧限制時，將引發異常，並且顯然允許將'i'遞增並傳遞給遞歸調用，此時您再次得到錯誤，依此類推。 ; o） – user113716

function fadethem(elem) { 
    elem.fadeIn('slow', function() { 
     if (elem.next().length > 0) fadethem(elem.next()); 
    }); 
} 

fadethem($('#photoWall a:eq(0)'));

退房小提琴：http://jsfiddle.net/QFccn/1/

我使用CSS隱藏了頁面加載的圖像而不是javascript。否則，圖像將被顯示直到DOM準備就緒。

在頁面加載時，我用第一張圖片調用淡入淡出功能。

如果動畫完成（回調fadeIn()），我再次使用下一個元素（如果有更多）調用該函數。

來源

2011-06-30 22:31:33 PeeHaa

（+1）這是一個比我的更簡潔的解決方案。 –

@Matt Ball：謝謝。對其他人來說太糟糕了OP沒有把它標記爲答案：D – PeeHaa

我相信如果你的答案不在最上面，他們會生存下來。 – user113716

當您使用delay()^[docs]方法時，這變得非常容易。

$('#photoWall a').hide().each(function(i) { 
    $(this).delay(i * 400).fadeIn(); 
});

例子：http://jsfiddle.net/eRgPt/（中借鑑@Matt Ball小提琴。）

編輯：

爲了解釋（所以向下的選民可以理解），這是真的很簡單。

使用each()^[docs]方法，您可以對與選擇器單獨匹配的每個元素進行操作。

您還會收到一個索引傳遞給回調函數的參數。因此，所有這一切都會將當前索引乘以動畫的總長度，使得每個連續元素開始n毫秒比先前更晚。

0 * 400 = 0 
    1 * 400 = 400 
    2 * 400 = 800 
    3 * 400 = 1200

此外，你可以很容易地將動畫的持續時間分配給一個變量，以更改動畫和延遲兩個時間。

var duration = 1000; 

$('#photoWall a').hide().each(function(i) { 
    $(this).delay(i * duration).fadeIn(duration); 
});

例：http://jsfiddle.net/eRgPt/1/

來源

2011-06-30 22:47:56 user113716

@ Down-voter：這是什麼問題？ – user113716

@向下投票人：你好？什麼，你不能拿出一個理由？沒有驚喜。 – user113716

我也喜歡這種變化。這三個答案或多或少涵蓋了所有基本的方法。 –

如何讓這個簡單的jQuery工作？

回答

相關問題