CODEWITHSUNDEEP
jquery
Dwain Maxwell
Dwain Maxwell

Reputation: 35

Pause jQuery Animation: using hover event of another div.

I have a problem of not being able to pause a jQuery.animate function on a div when I hover over the outer div. The reason I want it to stop on hover of the outer div is I am going to be overlapping the inner div with the outer div. I then want the animation to resume again on the inner div when the mouse leaves the outer div. Any help would be greatly appreciated, been stuck here for a little while now.... 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Practice</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
    $("#listSlide ul").animate({marginTop:-800},10000, 'linear', function(){
        $(this).find("li:last").after($(this).find("li:first"));
        $(this).css({marginTop:-73});   
    })  
});

</script>

How can I get the above jQuery animate function to pause on the outer div's(#animation) mouse hover event and resume on mouse leave of the #animation div?

<style type="text/css">

* {
    padding:0px;
    margin:0px;
}

#wrapper {
    width:960px;
    height:768px;
    margin: 0 auto;
}

#animation {
    width:260px;
    height:768px;
    float:right;
    position:relative;
}

#listSlide {
    height: 768px;
    width:200px;
    position:absolute;
    left:49px;
    overflow:hidden;
}

#listSlide ul {
    height: 700px;
}

#listSlide ul li {
    width:185px;
    text-align: center;
    height: 768px;
    list-style: none;
    float:  left;
    clear: left;
    margin-bottom:-40px;
}
</style>

</head>

<body>

<div id="wrapper">

    <div id-"animation">

        <div id="listSlide">
            <ul>
                <li><img src="images/belt.png" alt="Belt 1" /></li>
                <li><img src="images/belt.png" alt="Belt 2" /></li>
                <li><img src="images/belt.png" alt="Belt 3" /></li>
                <li><img src="images/belt.png" alt="Belt 4" /></li>
            </ul>
        </div>

    </div>

</div>

</body>

</html>

Upvotes: 2

Views: 647

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206618

jsBin demo

Typo <div id-"animation"> = <div id="animation">
and than remove float:right; from #animate's CSS

jQ:

$(document).ready(function(){

  function anim(){

    $("#listSlide ul").animate({marginTop:-800},10000, 'linear', function(){
        $(this).find("li:last").after( $(this).find("li:first") );
    }); 

  }
  anim(); // initial kick

  $('#animation').on('mouseenter mouseleave',function( e ){
    var mEnter = e.type=='mouseenter' ?  // if
         $("#listSlide ul").stop( 1 ) :  // is mouseenter (STOP!)
                               anim() ;  // is mouseleave (ANIM!)
  });

});

Upvotes: 1

Related Questions