jQuery: простая анимация с использованием: hover

Question

У меня есть четыре квадрата на странице. Все они имеют :hover псевдокласс с переходом, который добавит тень inset через 0,5 секунды на hovering.

Что мне нужно сделать, это написать код jQuery, который плавно и случайным образом будет имитировать состояние :hover на странице загрузки.

Извините за неясное объяснение. Итак, когда страница загружена, jQuery добавит тень к одному квадрату, а затем удалит ее через некоторое время, а затем выполнит ту же процедуру с другими квадратами в случайном порядке.

Вот мой код здесь: http://jsfiddle.net/bqux7/

С наилучшими пожеланиями

Answer 1

Ive был в этой игре. Это, кажется, работает хорошо, посмотрите объявления увидеть, что вы думаете: 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(); 

}) 

Вам понадобится дополнительный код для остановить зависание, когда кто-то на самом деле парит над квадратами, которые я считаю.

Answer 2

Вы можете протекающие как это:

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