Question

我有以下HTML

<div class="large-4 columns">
    <div class="hover-tile">
        <div class="base"><img src="/images/hovtile/1.png" /></div>
        <div class="cover"><img src="/images/hovtile/1-c.png" /></div>
        <div class="hover"><img src="/images/hovtile/1-h.png" /></div>
    </div>
</div>
<div class="large-4 columns">
    <div class="hover-tile">
        <div class="base"><img src="/images/hovtile/2.jpg" /></div>
        <div class="cover"><img src="/images/hovtile/2-c.png" /></div>
        <div class="hover"><img src="/images/hovtile/2-h.png" /></div>
    </div>
</div>
<div class="large-4 columns">
    <div class="hover-tile">
        <div class="base"><img src="/images/hovtile/3.png" /></div>
        <div class="cover"><img src="/images/hovtile/3-c.png" /></div>
        <div class="hover"><img src="/images/hovtile/3-h.png" /></div>
    </div>
</div>

当用户将鼠标悬停在图像上时，它会显示另一张图像。我想保留此功能并添加一个自动鼠标悬停事件，逐个执行此操作。

我尝试了以下代码。它同时为所有图像触发鼠标悬停。我希望它一个接一个地发生。它也应该回到origianl状态。我怎样才能做到这一点？并定期。

$(window).load(function(){
    var delay=0;
    $('.base').each(function(i, obj) {

        $(this).delay(delay).trigger("mouseover");
            delay += 500;
    });
});

用户操作悬停由

实现

$('.hover-tile').hover(function(e){
    $(this).children('.hover').fadeIn(350);
},function() {
    $(this).children('.hover').fadeOut(250);
});

Answer 1

JQuery's documentation指定delay()函数仅对使用效果队列的事件产生影响。没有提及指定trigger()函数使用它。因此，所有鼠标悬停触发器都会连续触发，但不会等待500毫秒。

你可以这样做：

$(window).load(function(){
    var delay=0;
    $('.base').each(function(i, obj) {
        setTimeout(function(){
            $(obj).trigger('mouseover');
        }, delay);
        delay += 500;
    });
});

jQuery fire mouseover事件一个接一个

1 个答案: