jquery easing with animate

Question

1. i have a page that shows a div on mouseover i want the page to move to the div on focus....i got help here to do that...

Now i want the onfocus to the div to move with the easing plugin and move it. i dont want to use the 'slow' in the animate e.g

$('html, body').animate({ scrollTop: $('#box0').offset().top }, 1000);

how can i apply easing to the above code

Secondly i want the div that is showing to slide out from left to right on mouseenter and slide right to left before hiding. this is what i am using for now. I know there is a better or best way to achieve what i am doing right now.

$("#app0").mouseenter(function () {
 $("#lSection2").show('slide').delay(3000); //container for div of four 
 $("#boxContent0").slideDown(2000);$('html, body').animate({ scrollTop: $('#app0').offset().top }, 1000);// one of the divs within #lSection2

}); 

$('#boxContent0').mouseleave(function() {
    $("#boxContent0").fadeOut(1000);     
    $("#lSection2").fadeOut(1000);
});

Thanks for your help

Answer 1

The easing can be added as follow, see http://api.jquery.com/animate/

.animate( properties [, duration] [, easing] [, complete] )

You can use hover for mouseover and mouseout.

$("#app0").hover(function () {
     // Mouseover
     $("#lSection2").stop(true, false).width(0).animate({ width: 200}, 1000);
},function(){
     // Mouseout
     $("#lSection2").stop(true, false).width(0).animate({ width: 0}, 1000);
});

The stop is needed otherwise mouseover, mouseout, will complete the first animation and then the next and the next and the next, this way you can stop the animation and continue with the next.