CODEWITHSUNDEEP
javascriptjqueryhtmlsliderslideshow
thecore7
thecore7

Reputation: 484

How to pause Jquery div slider on mouseover and restart it on mouseout

Good evening, I have prepared jsfiddle Demo here http://jsfiddle.net/Z6Y95/1/

this is the html:

<ul>
<li><a href="#" class="stop" id="dev" >a1</a></li>
<li><a href="#" class="stop" id="facebook" > a2</a></li>
<li><a href="#" class="stop" id="seo">a3</a></li>
<li><a href="#" class="stop" id="support">a4</a></li></ul>
<div id="serviceimg" class="serviceimg">
<div class="hide" name="dev" style="background:red;color:#fff;">a1</div>
<div class="hide" name="facebook" style="background:red;color:#fff;">a2</div>
<div class="hide" name="seo" style="background:red;color:#fff;">a3</div>
<div class="hide" name="support" style="background:red;color:#fff;">a4</div>
</div>

This is a working jquery div slider, but I need to pause it on a href mouse over and show specific div associated with this a. On mouse out it has to continue div sliding but in my case on mouse out I am getting a few seconds pause without and div shown. How to start div sliding on mouse out?

Thank you in avance !

Upvotes: 1

Views: 1392

Answers (1)

Hristo Georgiev
Hristo Georgiev

Reputation: 2519

Here is the updated JS code:

$('.serviceimg div').hide(); // hide all slides
    $('.serviceimg div:first-child').show(); // show first slide

    var prop;



    prop = setInterval(function () {
        $('.serviceimg div:first-child').hide()
            .next('div').show()
            .end().appendTo('.serviceimg');
    }, 3000);

    $('div').hover(function () {

        clearInterval(prop);

    }, function () {
        console.log('out');
        prop = setInterval(function () {
            $('.serviceimg div:first-child').hide()
                .next('div').show()
                .end().appendTo('.serviceimg');
        }, 3000);
        return false;
    });

DEMO

SetInterval can be very "dangerous" because it can stack when you hover. I used return false to prevent that.

The .hover function turned out to be the most suitable for your case. You can read more about it here .

Upvotes: 1

Related Questions