当前位置: 编程技术>jquery
jquery animate()函数实现菜单折叠效果
来源: 互联网 发布时间：2014-09-03
本文导语: 在项目中实现菜单折叠显示的效果，用.animate()去实现隐藏展开的，代码如下： 代码示例: animate()函数实现菜单折叠-www. $(function(){ var i = 1;//设置状态判断 $('#butid').click(function(){ if(i == 1){ $('.co...
在项目中实现菜单折叠显示的效果，用.animate()去实现隐藏展开的，代码如下：
代码示例:
animate()函数实现菜单折叠-www.
$(function(){
var i = 1;//设置状态判断
$('#butid').click(function(){
if(i == 1){
$('.content').animate({left: '-=100px',width: '600px'}, "slow");
$('.left').animate({width: '0px'}, "slow");
i = 2;
}else{
$('.content').animate({left: '0px',width: '500px'}, "slow");
$('.left').animate({width: '100px'}, "slow");//fadeOut()
i = 1;
}
});
});
123
123
说明：在FF，IE7-8，chrome下执行是正常的。
IE6下无法隐藏left，原因：ie6默认内容高宽度超出时，DIV会自动撑开。
解决方法：
只要给.left{}加个overflow:hidden即可。
本来写个函数把.left里面的内容隐藏掉的，后来突然想通了这个原理，还以为是.animate()在IE6下有BUG。
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。