CODEWITHSUNDEEP
javascriptjqueryanimationjquery-animate
Roald Haahr
Roald Haahr

Reputation: 61

Jquery .animate() doesn't work second time i trigger it

I am making a carousel of several objects. It is supposed to spin the carousel, so the next object is in focus, when I click the next/previous buttons. The first time I click one of the buttons, it slowly animates the spin, but with the next clicks it just changes object without animation for some reason. And it should animate everytime i click, but it does it only the first time after each page reload.

Here is a jsfiddle: https://jsfiddle.net/sxybreak/jouevx28/1/

Here is my code:

$(document).ready(function() {
    var angle;
    var i = 0;

    $("#previous").on('click', function() {

        i+=1;

        $("#carousel").animate({borderSpacing: 40}, {
            duration: 'slow', 
            step: function(now, fx) {

                $(this).css({
               'transform': 'rotateY(' + (i*now) + 'deg)',
               '-webkit-transform': 'rotateY(' + (i*now) + 'deg)',
               '-moz-transform': 'rotateY(' + (i*now) + 'deg)',
               '-ms-transform': 'rotateY(' + (i*now) + 'deg)' });
        }
     });
  });


  $("#next").click(function() {

    i-=1;

    $("#carousel").animate({borderSpacing: 40}, {
      duration: 'slow',
      step: function(now, fx) {

        $(this).css({
            'transform': 'rotateY(' + (i*now) + 'deg)',
            '-webkit-transform': 'rotateY(' + (i*now) + 'deg)',
            '-moz-transform': 'rotateY(' + (i*now) + 'deg)',
            '-ms-transform': 'rotateY(' + (i*now) + 'deg)' });
      }
    });
  });
});

Upvotes: 4

Views: 2077

Answers (3)

bhavya joshi
bhavya joshi

Reputation: 1136

I have not tried to run it.but one reason that an animate is not working second time is because the natural queuing of animations. just use .stop() after selector, as in

$(this).stop()

Visit this link to know more http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

May be it will help other users coming to this page,just like me.

Upvotes: 1

afrin216
afrin216

Reputation: 2335

You're basically using the step function to make your custom animation, right? So in the first transformation borderSpacing is 0. This is animated to 40 where by calling your custom animation in each step.

However in the next click borderSpacing is still at 40. So there is nothing to animate to, which is why it just add the transform without doing any animation.

A simple solution would be to reset the borderSpacing value to "+40" (previous) and "-40" (next) and use it in your animation.

Example : 

$("#previous").on('click', function () {

    i += 1;

    $("#carousel").animate({
        borderSpacing: "+=40"
    }, {
        duration: 'slow',
        step: function (now, fx) {
            $(this).css({
                    'transform': 'rotateY(' + (now) + 'deg)',
                    '-webkit-transform': 'rotateY(' + (now) + 'deg)',
                    '-moz-transform': 'rotateY(' + (now) + 'deg)',
                    '-ms-transform': 'rotateY(' + ( now) + 'deg)'
            });
        }
    });
});

JSFiddle showing working example : https://jsfiddle.net/jouevx28/3/

Upvotes: 0

Jack Allan
Jack Allan

Reputation: 15014

This is happening because you are animating the setting of the border-spacing property. Once the animation is complete the border-spacing is 40 and so there is nothing to animate to.

Upvotes: 3

Related Questions