Geek asks and answers

How to stop and continue animation on mouseover in jQuery

eg:

simple example to explain:

$('.moveDiv').animate({ "margin-left": 2000 }, 20000, 'linear');

moveDiv elementwill move to the left when it is loaded, and now that mouse move over moveDiv element, I want it to stop and keep moving when mouse move out!

Any ideas?

I found this code in this https://stackoverflow.com/a/166269/2209 , so I just want to change the code so that it can stop and continue the animation on hover!

code demonstration

+2
source share
3 answers

Pause / resume animation plugin

    $(document).ready(function () {

        $(".moveDiv")
        .mouseover(function () { $(this).pauseAnimation(); })
        .mouseout(function () { $(this).resumeAnimation(); })
        .startAnimation({ "margin-left": 2000 }, 20000, 'linear');

    });
+8
source

Try:

$('.moveDiv')
    .animate({ "margin-left": 2000 }, 20000, 'linear')
    .hover(function(){
        $(this).stop(true,false);
    },
    function(){
        $(this).animate({ "margin-left": 2000 }, 20000, 'linear')
    });

let me know how you handle ...

oops.stop (true, false);

0
source

Just found the plugin proposed in the EBCEu4 solution - try using it, but a solution with less reuse will be:

var duration = 5000;
var target = 200;
$('.moveDiv')
    .animate({ "margin-left": target }, duration, 'linear')
    .hover(
     function(){
        $(this).stop(true,false);
    },
    function(){
        var $this = $(this);
        var cur = parseInt($this.css('margin-left'));
        $this.animate({ "margin-left": target }, duration*((target-cur)/target), 'linear')
    });
0
source

More articles:


All Articles