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：简单的动画使用：悬停

回答

相关问题