div class在加載頁面時淡入淡出

Question

我希望在頁面加載時使不同的類淡入淡出。

請參閱this web page。

正如你在上面的鏈接中看到的，有不同的灰色陰影和一些顏色的正方形。

我想在不同延遲的方格中淡入淡出。我發現了幾篇關於ID標籤淡入淡出的文章，但沒有一篇可以淡入Class標籤。我可以通過ID來實現，但這意味着將每個方塊作爲目標，因爲ID只能影響一個元素。

我想在時間影響幾個方格。

Answer 1

我會建議使用數據屬性，如data-start-color="#CCCCCC",data-end-color,data-over-time="100",data-out-time。

然後，你可以使用一個函數的所有廣場。類似的東西（對不起，我沒有在你的頁面上檢查過）：

$('.square').hover(
    function() { 
    $(this).stop().animate({ backgroundColor: $(this).data('end-color') }, $(this).data('over-time')); 
    }, 
    function() { 
    $(this).stop().animate({ backgroundColor: $(this).data('start-color') }, $(this).data('out-time')); 
    } 
)