我的布局如下:
<div id="outerwrap">
<div id="innerwrap">
<div id="centerc">...</div>
<div id="rightc" style="font-weight:bold">
</div>
<div style="background-color:White;height:10px;top:284px;left:0px"></div>
<div id="leftc">..</div>
</div>
<div id="footer"">...</div>
#outerwrap
{
background-color: #EE44E7;
}
#innerwrap
{
background-color: #EE44E7;
margin-right: 200px;
top:0px;
height:100%;
}
#leftc
{
position: absolute;
top: 111px;
left: 0px;
width: 197px;
background-color: #EE44E7;
font-size: 10px;
}
#centerc
{
position: relative;
margin-left: 199px;
padding: 0px;
background-color: white;
}
#rightc
{
position: absolute;
top:111px;
right: 0px;
width: 199px;
color: blue;
background-color: #EE44E7;
font-size: 10px;
}
#footer
{
padding: 0px;
margin: 0px;
width: 100%;
height: 62px;
visibility: hidden;
}
我想要做的是,当页面加载时,leftc的子项应该被隐藏,leftc应该有width = 20px。当用户将鼠标悬停在'leftc'上时,leftc应变为197px宽,动画流畅,现在应该可以看到孩子。当用户将鼠标悬停时,应隐藏子项,并且只有动画才能将leftc宽度设置为20px。
如何在适用于所有浏览器(包括IE8)的jQuery中执行此操作。谢谢。
答案 0 :(得分:1)
这样的事情:
$(document).ready(function() {
$("#leftc").css("width", "20px").children().css("display", "none");
$("#leftc").hover(function() {
$(this).stop();
$(this).animate({ width: "197px" }).children().css("display", "block/inline");
}, function() {
$(this).stop();
$(this).animate({ width: "20px" }).children().css("display", "none");
});
...
});
编辑:我的不好,我误读了你的问题,只选择所有的孩子并隐藏它们(:
第二次修改:请参阅上面的代码以了解hover-fix。您可以使用stop()
功能停止该元素上的所有动画,这样您每次都会重新开始。
如果你想用click事件做,你可以简单地设置一个标志:
var leftActive = false;
$("#leftc").click(function() {
if (leftActive) {
$(this).animate({ width: "20px" }).children().css("display", "none");
leftActive = false;
} else {
$(this).animate({ width: "197px" }).children().css("display", "block/inline");
leftActive = true;
}
});