cannot repeat animation

[drummerdude545]

I cannot get my animation to repeat itself more then just once.

This is my jQuery:

$('.cart').mouseenter(function(){
        $('.cartIcon').transition({
        perspective: '500px',
        rotateY: 360 ,
        duration: 400,
        easing: 'in'
    });
});

[MeanwhileMedia]

I was also wondering if there is a way to specify animation-iteration-count through this plugin. I want to use an infinite iteration, and then stop it when I specify.

Thanks, awesome work.

[drummerdude545]

did you try using your animation in a loop?

[MeanwhileMedia]

I want to stick with native CSS functionality.

[drummerdude545]

Im not super familiar with the plugin. You would have to open your own question.

[ghost]

I'm having the same problem, the animation will only work one time.

[ghost]

I too have an issue getting a simple click-then-animate working more than once. My function is getting called (tested with console.log) but the image won't animate after the first time. Any help? My code:

$("#navCog").live('click', function() {
    $(this).transition({ rotate: '45deg' });
});

Update So it seems the issue is that the css is added to the element, transform: rotate(45deg), and when run again since that style is already there the script just adds the same styling and hence no animation. I guess there needs to be some detection done by the function to ADD the new degrees to any existing styling. i.e. If currently at 45, then a 'rotate:45deg' should now be 'rotate:90'

[iamkeir]

You could wrap the animation code in an interval/timeout loop? Bind clearInterval to whatever action you desire.

[pingram3541]

or use relative values:

$("#navCog").live('click', function() {
  $(this).transition({ rotate: '+=45deg' });
});

should keep adding to the current css rotate value per click but still number will keep rising exponentially without a reset somewhere. You could use an if statement when it hits a specific value and reset it back to 0...for example if you wanted a full rotation with infinite looping maybe this would work?

function start(){
  if($('#navCog').hasClass('halt')){
    $(this).stop().removeClass('halt').css('transition', 'none');
  } else {
     //360deg per second, reset to 0 is needed for loop to work
    $('#navCog').transition({ rotate: '0deg', duration: '0' }).transition({ rotate: '360deg' }, 1000, 'linear', start);
  }
}

function end(){
  $('#navCog').addClass('halt');
}

$("#navCog").on('mouseenter', function() {
  start();
}).on('mouseleave', function() {
  end();
});