jQuery - 模拟每个' x'秒

时间:2014-04-16 19:46:32

标签: jquery hover

我有4个盒子,第一个作为特色盒子,一旦悬停在其他3个盒子上,内容将被复制到该特色盒子。

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");
});

基本上我需要模拟这个悬停事件每个&#39; x&#39;几秒钟,否则我需要每3个盒子的内容自动复制到精选框而不悬停,并保持悬停事件也能正常工作。

1 个答案:

答案 0 :(得分:1)

像这样的东西

var speed = 5000;

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

FIDDLE