jQuery：簡單的動畫使用：懸停

我在頁面上有四個方塊。他們都有:hover僞過渡階段，這將在hovering的0.5秒內增加一個inset陰影。jQuery：簡單的動畫使用：懸停

我需要做的是編寫一個jQuery代碼，該代碼可以在頁面加載時順利且隨機地模擬:hover狀態。

對不起有點不清楚的解釋。所以，當頁面加載時，jQuery會爲一個正方形添加一個陰影，然後在一段時間內刪除它，然後以隨機順序與其他正方形執行相同的過程。

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

與問候

來源

2013-11-15 Artem Ushakov

添加您的代碼將有所幫助。 –

我已經在這個小提琴中去了。它似乎運作良好看看廣告中看到你的想法：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(); 

})

你需要一些額外的代碼當有人真正懸停在我估計的廣場上時，停止懸停效果。

來源

2013-11-15 12:27:37 azzy81

您可以進行如下這樣：

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);

Reference for setInterval

來源

2013-11-15 12:24:35 Bigood

jQuery：簡單的動畫使用：懸停

回答

相關問題