我有4个盒子,第一个作为特色盒子,一旦悬停在其他3个盒子上,内容将被复制到该特色盒子。
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&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&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&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&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");
});
基本上我需要模拟这个悬停事件每个&#39; x&#39;几秒钟,否则我需要每3个盒子的内容自动复制到精选框而不悬停,并保持悬停事件也能正常工作。
答案 0 :(得分:1)
像这样的东西
var speed = 5000;
(function fn() {
$.each(item, function(i,el) {
setTimeout(function() {
$(el).trigger('mouseover');
}, i * speed);
});
setTimeout(fn, item.length * speed );
})();