0

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'
    });
});
Jeff
  • 12,147
  • 10
  • 51
  • 87
drummerdude545
  • 5
  • 3
  • can't get any hook on this. Seems we can accomplish setting up transitions again utilizing `complete` callback but though it is called, it does not animate it again. Maybe we need some way to clear the existing transition. Will look into it if got any time later. – TheVillageIdiot Apr 15 '13 at 00:09
  • thanks if you could figure it out it would be much appreciated – drummerdude545 Apr 17 '13 at 14:49
  • could you recopy this with jsfiddle? http://jsfiddle.net/ – Maxim Siebert Apr 19 '13 at 00:27

1 Answers1

0

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);
        });
    }
});
Nate
  • 4,718
  • 2
  • 25
  • 26
  • Ok this makes sense now. Im new with writing jQuery so I still have alot to learn. thanks a lot though! this works like a charm – drummerdude545 Apr 19 '13 at 21:50
  • This was a nice problem in that it had nothing to do with syntax - you did everything right. The problem was conceptual, and relied on really understanding what you'd done with your code. Good luck with jQuery - it's a wonderful library. – Nate Apr 20 '13 at 14:17