LearnFast.Ninja

jQuery stop animation on mouseover hover

Add jQuery library to your HTML page. Build custom Style to allow animate movement. Build HTML element to move with animate. Start the animate on body element. Build function for starting animation. Build function for stopping animation. Test the complete and working code example.

Step 1: Add jQuery library to your HTML page. 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
 
Step 2: Build custom Style to allow animate movement. 

.MyClass {

    position: relative;

}

 
Step 3: Build HTML element to move with animate. 

<div class="MyClass" onmouseover="Stop_Animate();">

    Hello from stop animation on mouseover hover

</div>

 
Step 4: Start the animate on body element. 
<body onload="Start_Animate();">
 
Step 5: Build function for starting animation. 

function Start_Animate() {

    $(".MyClass").animate({ "top": "500px" }, 6000);

}

 
Step 6: Build function for stopping animation. 

function Stop_Animate() {

    $(".MyClass").stop();

}

 
Complete code: 

<!DOCTYPE html>

<html>

<head>

    <title>jQuery stop animation on mouseover hover</title>

    <style type="text/css">

        .MyClass {

            position: relative;

        }

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

    <script type="text/javascript">

        function Start_Animate() {

            $(".MyClass").animate({ "top": "500px" }, 6000);

        }

        function Stop_Animate() {

            $(".MyClass").stop();

        }

    </script>

</head>

<body onload="Start_Animate();">

    <div class="MyClass" onmouseover="Stop_Animate();">

        Hello from stop animation on mouseover hover

    </div>

</body>

</html>



Tags

jquery

jquery-animate