Solution 1 :

Looking at your fiddle, the issue isn’t with the .stop(), it’s with the .animate, specifically the callback:

     function upDown() {
        for (var i = 1; i <= QTY_TARGETS; i++) {
            ...
            wrap.animate({ 'top': '' + moveTop + 'px' }, {
                duration: duration,
                complete: function () {
                    wrap.animate({ top: '' + moveTopRepeat + '' },
                    {
                        duration: duration,
                        // this line here
                        complete: upDown
                    });
                }
            });
        }
    }

The complete:upDown restarts upDown, but is called form within every target and calls the outer upDownAll.

Separate upDown to upDownAll and an inner upDownTarget then on the individual target complete reset just for that target:

    function upDown() {
        for (var i = 1; i <= QTY_TARGETS; i++) {
            upDownTarget(i)
        }
    }
    function upDownTarget(i)
    {
      ...
      wrap.animate({ 'top': '' + moveTop + 'px' }, {
        duration: duration,
        complete: function () {
          wrap.animate({ top: '' + moveTopRepeat + '' },
                       {
            duration: duration,

            // only restart this one target
            complete: function() { upDownTarget(i) }
          });
        }
      });
    }

Updated fiddle: https://jsfiddle.net/29hntbve/


As an extra, you also might like to stop the animations when the player loses:

res.text('You lose');
$(".wrap").stop();

Problem :

I want disable animation after user checked on checkbox, but I can’t get it to work.

 function onChangeTarget(num) {
            updateCounter();
            if (num != 0) {
                targetHideAnimation = parseInt(num);
                $('div.plus-point.plus-point' + num + '').css("display", "block");
                $('div#wrap-' + num + ' img').css("filter", "grayscale(1)");
                if (targetHideAnimation != 0) {
                    $('div#wrap-' + num + '').stop();
                }
            }
        } 

Here my full source code :
https://jsfiddle.net/ninhnguyen2208/o4htr5xj/

Please tell me what am I missing.

Comments

Comment posted by Ninh Nguyen

Yes, thanks bro so much.

By

Leave a Reply

Your email address will not be published. Required fields are marked *