jQuery的动画不能正常工作

检查我的一片这里 http://jsfiddle.net/metalshan/eHG6X/ 我要的是，如果我点击左侧的绿色栏上的代码，其宽度应切换到10％和20％。在这样做的同时，右侧还应该切换其宽度。在这里，留下部分工作很好，但是当我跑动画功能为“＃内容”，jQuery的动画不能正常工作

$("#content").animate({ 
     width: '90%' 
    })

它显示了＃内容生动活泼，而不是在它里面的div。如果你看到jsFiddle中的代码，你会明白。

来源

2013-09-26 Paul Shan

在你的小提琴中右边的蓝色条正在扩大。你期待什么行为？ – BenM

所有div在您的小提琴中完美展现 –

使用absolute positioning而不是浮动，问题就解决了。

jsFiddle Demo

#container{ 
    overflow: hidden; 
}  
#lower{ 
    position: relative; 
} 
#nav{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
} 
#content{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
}

编辑：

一个更好的选择是使用absolutely positioned table，然后你可以动画只有一个窗格，而不是他们两个。

jsFiddle Demo

CSS：

html,body{ 
    overflow: hidden; 
} 
#container{ 
    overflow: hidden; 
} 
#lower{ 
    width:100%; 
    height:90%; 
    position: absolute; 
    top: 10%; 
    left: 0; 
    right: 0; 
    display: table; 
} 
#nav{ 
    display: table-cell; 
    height: 100%; 
    width:20%; 
} 
#content{ 
    display: table-cell; 
    width:80%; 
    height:100%; 
}

的jQuery：

$("#nav").click(function(){ 
    if (isSmall) $(this).animate({ width:'20%' }) 
    else   $(this).animate({ width:'10%' }) 

    isSmall=!isSmall; 
});

来源

2013-09-26 07:06:46 Itay

谢谢......这正是我想要的。非常感谢！ –

-1

将其更改为

$("#content").animate({ width: '90%'}, 100)

来源

2013-09-26 07:10:11 Ronjon

jQuery的动画不能正常工作

回答

相关问题