CODEWITHSUNDEEP
javascriptjquery
user3016214
user3016214

Reputation: 69

Stopping jQuery onmouseover

I am totally newbie in jquery and I need to change jquery slideshow function to work only onmouseout. Simple - If somebody will hover #slideshow div than slideshow will stop switching images. here is my slideshow script:

   $("#slideshow").mouseout() {

        $("#slideshow > div:gt(0)").hide();

        setInterval(function() { 
          $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },  2000);

    });

and here is my $slideshow div

<div class="ss">
                        <div id="slideshow">
                            <div>
                                <img src="img/ss.jpg">
                            </div>
                            <div>
                                <img src="img/ss2.jpg">
                            </div>
                            <div>
                                <img src="img/ss3.jpg">
                            </div>
                            <div>
                                <p>text</p>
                            </div>
                         </div>
                    </div>

Upvotes: 0

Views: 74

Answers (1)

Tuhin
Tuhin

Reputation: 3373

var initList=setInterval(function() { 
          $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },  2000); 
$('#slideshow').mouseover(function(){
    clearInterval(initList);
 }).mouseout(function(){
    initList = setInterval(function(){ $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');}, 2000) ;
 });

I think it will work. So, when mouseover occurs the interval cleared from the initList. Again when mouseout the same can be applied to the initList

Upvotes: 1

Related Questions