jquery轻松使用animate

Question

1. 我有一个在mouseover上显示div的页面，我希望页面移动到焦点上的div。。。。我在这里得到了帮助

现在我想让onfocus移动到div，并使用轻松插件移动它。我不想在动画中使用"slow"，例如

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

我如何将宽松应用于上述代码

其次，我希望显示的div在mouseenter上从左向右滑动，并在隐藏之前从右向左滑动。这就是我现在使用的。我知道有更好或最好的方法来实现我现在正在做的事情。

$("#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);
});

感谢您的帮助

Answer 1

可以按如下方式添加宽松，请参阅http://api.jquery.com/animate/

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

您可以将悬停用于mouseover和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);
});

需要停止，否则mouseover、mouseout将完成第一个动画，然后完成下一个、下一个和下一个，这样您就可以停止动画并继续下一个。