2014-04-16 46 views
0

我有4個盒子,第一個作爲特色框,內容將複製到該特色框,一旦懸停在其他3盒。jQuery - 模擬懸停事件每'x'秒

JSFIDDLE

HTML:

<ul class="items clearfix"> 
    <li class="item"> 
     <a href=""><h2 class="title">01 - Lorem ipsum</h2></a> 
     <p class="description"> 
      First item - Lorem ipsum dolor sit amet. 
     </p> 
     <img src="http://placehold.it/100x100/42bdc2/FFFFFF&amp;text=News" alt=""> 
    </li><!-- Featured Item --> 

    <li class="item"> 
     <a href=""><h2 class="title">01 - Lorem ipsum</h2></a> 
     <p class="description"> 
      First item - Lorem ipsum dolor sit amet. 
     </p> 
     <img src="http://placehold.it/100x100/42bdc2/FFFFFF&amp;text=News" alt=""> 
    </li><!-- End Item --> 

    <li class="item"> 
     <a href=""><h2 class="title">02 - Lorem ipsum</h2></a> 
     <p class="description"> 
      Second item - Lorem ipsum dolor sit amet. 
     </p> 
     <img src="http://placehold.it/100x100/42bdc2/FFFFFF&amp;text=News" alt=""> 
    </li><!-- End Item --> 

    <li class="item"> 
     <a href=""><h2 class="title">03 - Lorem ipsum</h2></a> 
     <p class="description"> 
      Third item - Lorem ipsum dolor sit amet. 
     </p> 
     <img src="http://placehold.it/100x100/42bdc2/FFFFFF&amp;text=News" alt=""> 
    </li><!-- End Item --> 
</ul> 

的jQuery:

var feat =$(".item").first(); 
var item =$(".item").next(); 
item.mouseover(function(){ 
    featitem = $(this).html(); 
    feat.html(featitem); 
    $(this).addClass("featured"); 
}); 

基本上我需要模擬每一個 'X' 秒這個懸停事件,否則我需要的內容每3個盒子自動複製到特色盒子而不會懸停d保持懸停事件的工作。

+0

您的使用'下一個()'沒有意義?爲什麼觸發懸停事件而不是簡單地按計劃更改內容?你需要在「物品」之間旋轉嗎?爲什麼沒有插入特色內容的元素具有不同的類/ id以區別於其他內容元素? –

回答

1

像這樣的事情

var speed = 5000; 

(function fn() { 
    $.each(item, function(i,el) { 
     setTimeout(function() { 
      $(el).trigger('mouseover'); 
     }, i * speed); 
    }); 
    setTimeout(fn, item.length * speed); 
})(); 

FIDDLE

+0

似乎不錯,設置速度變量爲xxx?得到5秒。 –

+0

5秒=== 5000毫秒 – adeneo

+0

請參閱[鏈接](http://jsfiddle.net/IbrahimAboSeada/bXx5j/4/)5秒後不跳。 –