您的位置:首页 > Web前端 > JQuery

JQuery中animate的一些坑

2016-04-07 11:10 639 查看

auto

animate对auto支持的很不好,在做动画的时候很不方便。height,left等属性都不支持auto。

对于height在每次执行animate之前通过.height()方法读取一下就好。

对于left使用.position().left方法来读取。不过对于left来说还有一个问题,在改left或right之中的一个的时候需要把另一个置为auto,否则这两个会互相影响。position()方法并没有提供right的值,这时就要自己算出来咯~

var $menu = $("#menu"),
$menuWidthControl = $(".sys-menu-widthControl");
//在顶部菜单栏不够宽时,向左或向右滑动
$(".sys-menu-left").mouseenter(function(){
var menuFatherWidth = $menuWidthControl.width();
var menuLeft = $menu.position().left;
var menuWidth = $menu.width();
$menu.css("right",menuFatherWidth-menuLeft-menuWidth);
$menu.css("left","auto");
$menu.animate({"right":"0px"},1000);
});
$(".sys-menu-right").mouseenter(function(){
var menuLeft = $menu.position().left;
$menu.css("left",menuLeft);
$menu.css("right","auto");
$menu.animate({"left":"0px"},1000);
});
$(".sys-menu-right,.sys-menu-left").mouseleave(function(){
$menu.stop();
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery 动画 auto