Question

页面上有四个方块。所有这些都有:hover伪类与转换，将在inset上的0.5秒内添加hovering阴影。

我需要做的是编写一个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);

Reference for setInterval

Answer 2

我已经走进了这个小提琴。看起来效果很好看看你的想法：http://jsfiddle.net/bqux7/4/

我添加了一个类.hover来进行转换并添加了以下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();

})

当有人实际悬停在我估算的方格上时，你需要一些额外的代码来阻止悬停效果。

jQuery：使用简单动画：悬停

2 个答案: