CODEWITHSUNDEEP
javascriptjstween
user1558030
user1558030

Reputation: 1

Animation Bubbling issue using JSTween

I'm a bit new to the js stuff, but I have an issue that's driving me crazy. I have created a simple animation using jstween. My issue is when I click on the button that starts my animation, the animation works fine. If you keep pressing the button though it restarts the animation, that's what I'm trying to prevent.

I tried stop() and stop(true) but it didn't work. Here is my code below:

$('.mybtn1').click(function(){

    $('.box1').tween({
    left:{
      start: 0,
      stop: 400,
      time: 0,
      duration: 1,
      units: 'px',
      effect: 'easeInOut',

    }
    });

    $.play();
})

Upvotes: 0

Views: 370

Answers (1)

derrylwc
derrylwc

Reputation: 826

You're passing in a static value of 0 every time the function is run. If the element has moved at all, then it'll jump back to left: 0 before starting the tween.

Try passing in the current left offset when you run the function.

$(".mybtn1").click( function(){

    el = $('.box1');

    el.tween({
        left:{
            start: function() { return el.offset.left; },
            stop: 400,
            time: 0,
            duration: 1,
            units: 'px',
            effect: 'easeInOut',
        }
    });

    $.play();
});

You might need to mess with the syntax here. I'm not sure whether offset.left returns the value that you need (could be el.style.left or something).

Upvotes: 0

Related Questions