CODEWITHSUNDEEP
jquerymouseover
Vidya
Vidya

Reputation: 8207

jQuery fire mouseover event one by one

I have the following 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>

When the user hovers his mouse on the image it shows another image. I want to retain this functionality and add a automatic mouseover event which does this one by one .

I tried the following code . It fires the mouseover for all the images simultaneously. I want it to happen one by one. Also it should return to origianl state . How can I achieve this ? and the same periodically. 

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

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

The user action hover is implemented by 

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

Upvotes: 1

Views: 112

Answers (1)

Antoine Combes
Antoine Combes

Reputation: 1444

JQuery's documentation specifies that the delay() function only has an effect on events making use of the effects queue. There is no mention specifying the trigger() function makes use of it. Therefore, all of your mouseover triggers are fired consecutively, but without waiting your 500ms.

You could maybe do something like this:

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

Upvotes: 2

Related Questions