Working with jQuery plugins

Question

So im trying to do some animations on a personal project im working on but i've new to jquery and im having trouble understanding how it works. I've been learning through using a plug in called jquery.transit(http://ricostacruz.com/jquery.transit/) and i have tried getting it to work but there is something im missing. The documentation doesn't seem that great either because I don't see any good examples of the transitions working, just snippets of the jquery that don't seem complete.

For now, I have this code which I was try to get to animate my header links, and the animation works itself, but it only works once, and stops working after the initial hover. How can I get this working? Code:

 $('.navlinks').hover(function(){
        $(this).transition({
        perspective: '500px',
        rotateX: 360,
        rotateY: 360
        })
    });

Answer 1

I've created a jsfiddle using the exact code that you provided and it works just fine. Here's the link: http://jsfiddle.net/a4m6aaL8/

<ul>
    <li class="navlinks">Link 1</li>
    <li class="navlinks">Link 2</li>
    <li class="navlinks">Link 3</li>
</ul>

$('.navlinks').hover(function(){
    $(this).transition({
        perspective: '500px',
        rotateX: 360,
        rotateY: 360
    });
});

Edit: maybe you're imported the library or jquery incorrectly, or in the wrong order?

Edit: it must have to do with the library you're using, when replacing the transition stuff with something like fadein/out, it works everytime when hovered. http://jsfiddle.net/obmk4a9L/

Edit: here's the fix: http://jsfiddle.net/0qogt8m7/

$(document).on('mouseenter', '.navlinks', function() {
  $(this)
  .transition({perspective: '300px', rotateX: '360deg', rotateY: '360deg'})
  .transition({rotateX: 0, rotateY: 0, duration: 0});
});