jQuery：使用：hover的簡單動畫

Question

我在頁面上有四個方塊。 它們都具有:hover偽類以及過渡，它將在hovering時0.5秒內添加一個inset陰影。

我需要做的是編寫一個平穩且隨機的jQuery代碼，以模擬頁面加載時的:hover狀態。

抱歉，解釋不清楚。 因此，當頁面加載時，jQuery會在一個正方形上添加陰影，然后在一段時間內將其刪除，然后對其他正方形以隨機順序執行相同的過程。

那是我的代碼在這里： http : //jsfiddle.net/bqux7/

最誠摯的問候

Answer 1

您可以這樣進行：

1-將您的:hover CSS代碼復制粘貼到另一個類中，例如.hovered 。

2- 可選：將類添加到您的s#元素中，例如.squares

3-將元素添加到數組中：

//If you don't will to put a class
var arrayOfSquares = [$('s1'),$('s2'),$('s3'),$('s4')];
//If you do, it's cleaner
var arrayOfSquares = $('.squares'); 

4-在您的JS中放置一個計時器，您將使用Math.random和Math.floor從數組中獲取一個隨機元素：

//Every 8 seconds, call this code :
window.setInterval(function() {
    var index = Math.floor(Math.random() * arrayOfSquares.length); //Take a number between 0 and your number of elements
    var currentSquare = $(arrayOfSquares[index]); //Get your jQuery DOM element

    //Add the class, wait 2 seconds, then remove it
    currentSquare.addClass('hovered').delay(2000).removeClass('hovered');

}, 8000);

setInterval的參考

Answer 2

我已經在這個小提琴中走了。 看一下您的想法似乎效果很好： http : //jsfiddle.net/bqux7/4/

我添加了一個類.hover來進行transistion，並添加了以下jquery：

$(function() {

    var myArray = ['#s1', '#s2', '#s3', '#s4'];

    window.setInterval(function(){
        doHover();   
    }, 2000);

    function doHover(){
        var rand = myArray[Math.floor(Math.random() * myArray.length)];
        for(i in myArray){
            $(myArray[i]).removeClass("hover");    
        }

        $(rand).addClass("hover");      
    }

    doHover();

})

當有人實際將鼠標懸停在我認為的正方形上時，您將需要一些其他代碼來停止懸停影響。