CODEWITHSUNDEEP
jquery
Myles
Myles

Reputation: 812

pause jquery function on hover then continue after

the following code essentially animates a banner. Every five seconds the banner swaps, and so does the image map. What I would like to achieve is that when the user hovers on a banner, the five second countdown pauses (or resets) until the user removes their mouse cursor from the hover.

I would also like this to be compatible as far back as IE8, as for tablets/mobile I assume this wont work very well so will look for a work around later.

Consider:

$(function () {
  $('.fadein img:gt(0)').hide();
  setInterval(function () {
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
  }, 5000);
});

And:

.fadein {
  display: block;
  margin:auto;
  height: 49px;
  width:100%;
}
.fadein img {
  position:absolute;
}

And:

<div class="fadein">
  <img src="http://www.boohoo.com/content/ebiz/boohoo/resources/images/topbanners/Offer_Strip_GBP_v1.jpg" usemap="#secondM" border="0" width="964" height="49" alt="" style="" id="level2Menu"/>
  <img src="http://www.boohoo.com/content/ebiz/boohoo/resources/images/topbanners/Offer_Strip_EUR_v1.jpg" usemap="#secondM2" border="0" width="964" height="49" alt="" style="" id="level2Menu"/>
</div>
<map name="secondM">
        <area shape="rect" coords="0,0,285,44" href="#" alt="New In" title="New In"    />
        <area shape="rect" coords="289,0,671,44" href="#" alt="Delivery Details" title="Delivery Details"    />
        <area shape="rect" coords="676,0,960,44" href="#" alt="Unidays" title="Unidays"    />
</map>
<map name="secondM2">
        <area shape="rect" coords="0,0,285,44" href="#" alt="New In2" title="New In2"    />
        <area shape="rect" coords="289,0,671,44" href="#" alt="Delivery Details2" title="Delivery Details2"    />
        <area shape="rect" coords="676,0,960,44" href="#" alt="Unidays2" title="Unidays2"    />
</map>

You can see a working fiddle of this here: http://jsfiddle.net/fEXEg/1/

Any suggestions?

Upvotes: 2

Views: 440

Answers (2)

Zathrus Writer
Zathrus Writer

Reputation: 4331

You'd need to store the hover state somewhere (preferably in the data attribute of that fade div) and check for it in each cycle.

$(function () {
    var fElement = $('.fadein');
    fElement.find('img:gt(0)').hide();
    setInterval(function () {
        if (!fElement.data('paused')) {
            fElement.find(':first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
        } else {
             console.log('waiting...');   
        }
    }, 5000);

    $('map').hover(
        function() {
            console.log('pausing');
            fElement.data('paused', 1);
        },
        function() {
            console.log('unpausing');
            fElement.data('paused', 0);
        }
    );
});

This will also allow you to do additional processing if needed every 5 seconds, while still halting that animation (like logging the state into Google Analytics, refreshing session via AJAX etc.).

Updated jsFiddle: http://jsfiddle.net/fEXEg/7/

Upvotes: 2

secelite
secelite

Reputation: 1373

You could clear the interval o hovering the imagemap, and when leaving the map resuming it.

$('map').hover(function() {
    window.clearInterval(intervalBanner);
}, function() {
    intervalBanner = window.setInterval(fadeBanner, 5000);
});

For this I have swaped the fade function in an own function. So you can resume it when ever you want by calling window.setInterval(fadeBanner, 5000);.

E.g.: http://jsfiddle.net/fEXEg/5/

Upvotes: 1

Related Questions