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(); });
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- Gifski:一个跨平台的高质量 GIF 编码器
- Auto Autorun.inf desktop.ini sxs.exe auto.exe类病毒的手动处理完全技巧
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果