JQuery中animate的一些坑

作者: exialym | 来源:发表于2016-05-13 20:37 被阅读477次

    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中animate的一些坑

        本文链接:https://www.haomeiwen.com/subject/lmdmrttx.html