jQuery一一触发鼠标悬停事件答案

【问题标题】：jQuery fire mouseover event one by onejQuery一一触发鼠标悬停事件
【发布时间】：2014-10-01 00:22:39
【问题描述】：

我有以下 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>

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

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

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

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

用户动作hover由

实现

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

【问题讨论】：

你确定它是一次完成的吗？每个之间的 500 毫秒延迟并没有那么长。
在 2000 年完成了它，但它仍然是一起完成的。
@rrmo 显示另一张图片是什么意思？是先显示 1.png，然后显示 1-c.png，然后显示 1-h.png，还是先显示 .hover-tile，然后显示下一个，依此类推。
1-c.png 怎么样？您能否发布您的鼠标悬停处理程序，以便我了解您在做什么？
.delay() 不是只为动画队列保留的吗？ mouseover 事件不是动画队列，这就是为什么所有事件都被一次触发的原因。

标签： jquery mouseover

【解决方案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;
    });
});

【讨论】：