cannot repeat animation - jQuery Transit

Question

Using the jQuery plugin Transit,

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'
    });
});

Answer 1

Your problem is that the first time you transition your cart icon, you spin it 360 degrees. The second time you transition it, it still has that state. So you transition it again... from 360 degrees to 360 degrees, which means nothing happens at all. To have it animate every time, you need to pick some method of transitioning it back.

http://jsfiddle.net/rFKw8/2/

This is just one possibility:

$('.cart').mouseenter(function(){
    var $cart = $(this),
        $cartIcon = $cart.find('.cartIcon'),
        transitionOptions = {
            perspective: '500px',
            duration: 500,
            easing: 'in'
        };

    if (!$cart.data('transitioned')) {
        transitionOptions.rotateY = 360;
        $cartIcon.transition(transitionOptions, function () {
            $cart.data('transitioned', true);
        });
    } else {
        transitionOptions.rotateY = 0;
        $cartIcon.transition(transitionOptions, function () {
            $cart.data('transitioned', false);
        });
    }
});