不知道这个是否适合你:http://jsfiddle.net/yCY9y/3/
DOM:
<div id="wrapper">
<div id="left" class="content_left">LEFT</div><div id="right" class="content_right">RIGHT</div>
</div>
我使用包装器来确保我们永远不会破坏下一行的右侧。
CSS:
#wrapper {
width:100%;
overflow:hidden;
white-space:nowrap;
}
#left, #right {
display:inline-block;
width: 50%;
}
#left {
background:red;
}
#right {
background:yellow;
}
我用在#wrapper
white-space:nowrap; // Newer break whitespaces (break to the next line)
and
width:100%;
On #left, #right
we use:
display:inline-block;
女巫首先兼容>IE6。 (希望这不是问题)。
JS:
$("#left, #right").each(function() {
$(this).data("standardWidth", $(this).width());
});
$("#left, #right").hover(function() {
$(this).animate({
width: "70%"
}, 300 );
$(this).parent().children().not(this).animate({
width: "30%"
}, 300 );
}, function() {
$(this).parent().children().each(function() {
$(this).animate({
width: $(this).data("standardWidth")
}, 300 );
});
});
首先我绑定相同的mouseover
and mouseout
双方的事件#right
and #left
$(selector).hover(mouseOverHandler, mouseOutHandler);
...
$(this).parent().children().not(this)
我们获取事件被触发的元素并找到它的所有父元素(#wrapper
) 子节点:$(this).parent().children()
现在我们过滤掉所有匹配的内容this
使用 jQuery 的not
方法。 (this
= #left
OR #right
)女巫是元素。现在我们有#right -> #left
and #left -> #right
.
The mouseOutHandler
重置所有#wrapper
childNodes 的宽度为 50%
希望这能引导您走上正确的道路......
EDIT:
如果您的动画要链接/排队使用过期,可以使用stop
停止所有活动动画并清除队列的方法:
$(selector).stop().animate({
....
})