Jquery easing effect

Question

I've been trying over the last few hours to implement a jQuery easing effect to my previous question (code here), but all in vain.

It didn't work at all. What I'm trying to do is make the example work the same way, but add easeOutBack to it so that if I hovered on the text, it would begin with the easeOutBack effect until the next text shows up. And again easeOutBack effect would happen when I unhover the text.

Any idea how to do that?

Answer 1

what about this - http://jsfiddle.net/ZhUx8/1/.

jQuery(function($) {

    $('.topnav li').find('a[href]').parent().each(function() {
        var li   = $(this),
            a    = li.find('a'),
            div = $('<div>' + '<\/div>');

        li.hover(function() {
            a.stop().animate({marginTop: '-64'}, 500, "easeInOutBack");
        },
        function() {
            a.stop().animate({marginTop: '0'}, 500, "easeInOutBack");
        })
        .append(span);
    });

});

make sure to ad this to your head tag.

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript" ></script>