我有两个并排的div。悬停时，我希望其中一个div占据100%的width，另一个折叠。
我在这里做了一个 jsfiddle - 过渡很尴尬，因为我正在更改折叠div 的宽度，这会在折叠时更改文本缩进。
我也尝试了slideToggle和hide，但在这种情况下，在扩展div 时，另一个div 位于其下方(显然是因为宽度的总和大于 100%)
有什么解决方案可以在不更改div 内容缩进和位置的情况下使折叠的div 滑动/隐藏？
谢谢
法典： .HTML：
<div style="width:90%;margin:40px auto;">
<div id="leftDiv" style="width:50%;background:yellow;height:200px;float:left;">
<h3> It'S A GAME </h3>
</div>
<div id="rightDiv" style="width:50%;background:black;height:200px;float:right;">
<h3 style="color:white"> It'S A TUTORIAL </h3>
</div>
</div>
.JS：
jQuery(document).ready(function () {
jQuery("#leftDiv").hoverIntent(function () {
jQuery("#leftDiv").animate({"width":"100%"},1000);
jQuery("#rightDiv").animate({"width":"0%"},1000);
},
function () {
jQuery("#leftDiv").animate({"width":"50%"},1000);
jQuery("#rightDiv").animate({"width":"50%"},1000);
}
);
jQuery("#rightDiv").hoverIntent(function () {
jQuery("#rightDiv").animate({"width":"100%"},1000);
jQuery("#leftDiv").animate({"width":"0%"},1000);
},
function () {
jQuery("#rightDiv").animate({"width":"50%"},1000);
jQuery("#leftDiv").animate({"width":"50%"},1000);
}
);
});
我更改了CSS和一些脚本(基本上到处删除1%)。
.HTML
<div style="width:90%;height:200px">
<div id="leftDiv" style="width:49%;background:yellow;height:200px;display:inline-block;overflow:hidden;white-space:nowrap">
<h3> It'S A GAME </h3>
</div>
<div id="rightDiv" style="width:49%;background:black;height:200px;display:inline-block;overflow:hidden;white-space:nowrap">
<h3 style="color:white"> It'S A TUTORIAL </h3>
</div>
</div>
.JS
jQuery(document).ready(function () {
jQuery("#leftDiv").hoverIntent(function () {
jQuery("#leftDiv").animate({"width":"99%"},1000);
jQuery("#rightDiv").animate({"width":"0%"},1000);
},
function () {
jQuery("#leftDiv").animate({"width":"49%"},1000);
jQuery("#rightDiv").animate({"width":"49%"},1000);
}
);
jQuery("#rightDiv").hoverIntent(function () {
jQuery("#rightDiv").animate({"width":"99%"},1000);
jQuery("#leftDiv").animate({"width":"0%"},1000);
},
function () {
jQuery("#rightDiv").animate({"width":"49%"},1000);
jQuery("#leftDiv").animate({"width":"49%"},1000);
}
);
});
http://jsfiddle.net/Rm7S3/
您需要在CSS上为左div 和右div 添加两个条目：
white-space: nowrap;
overflow: hidden;
除此之外，您正在使用hoverIntent这不是真正需要的，只是您可以使用hover
参考现场演示
有了所有这些，我已经修改了您的HTML和JQuery，如下所示
.HTML：
<div class="mainDiv">
<div class="leftDiv">
<h3> It'S A GAME </h3>
</div>
<div class="rightDiv">
<h3 style="color:white"> It'S A TUTORIAL </h3>
</div>
</div>
JQuery：
$(".leftDiv").hover(
function() {
$(this).animate({"width": "100%"}, 1000);
$(".rightDiv").animate({"width": "0%"}, 1000);
},
function() {
$(this).animate({"width": "50%"}, 1000);
$(".rightDiv").animate({"width": "50%"}, 1000);
});
$(".rightDiv").hover(
function() {
$(this).animate({"width": "100%"}, 1000);
$(".leftDiv").animate({"width": "0%"}, 1000);
},
function() {
$(this).animate({"width": "50%"}, 1000);
$(".leftDiv").animate({"width": "50%"}, 1000);
});
.CSS：
.rightDiv {
width: 50%;
background: black;
height: 200px;
overflow: hidden;
float: right;
white-space: nowrap;
}
.leftDiv {
width: 50%;
background: yellow;
height: 200px;
overflow: hidden;
float: left;
white-space: nowrap;
}
.mainDiv {
width: 90%;
margin: 40px auto;
}
更新：
作为您的评论，您希望停止悬停排队。最好的解决方法是使用.stop()函数并稍微减小宽度。
参考现场演示 - 2
JQuery：
$(".leftDiv").hover(
function() {
$(this).stop().animate({"width": "100%"}, 1000);
$(".rightDiv").stop().animate({"width": "0%"}, 1000);
},
function() {
$(this).stop().animate({"width": "49.3%"}, 1000);
$(".rightDiv").stop().animate({"width": "49.3%"}, 1000);
});
$(".rightDiv").hover(
function() {
$(this).stop().animate({"width": "100%"}, 1000);
$(".leftDiv").stop().animate({"width": "0%"}, 1000);
},
function() {
$(this).stop().animate({"width": "49.3%"}, 1000);
$(".leftDiv").stop().animate({"width": "49.3%"}, 1000);
});
我知道你不喜欢动画完成后的文本换行。 您可以添加以下 css 以防止文本中断。
h3{
white-space:nowrap;
}
查看更新的小提琴
不是问题的一部分，但强烈建议将样式保留在 css 文件中而不是内联(除非您遇到性能问题)。以更新的小提琴为例
当您将
- div 放置在div 中时，始终
inline-block为display。 用
100%宽度和高度覆盖html和bodyhtml,body{ width: 100%; height: 100%; }
更新：
我已经重构了您的代码，以便很好地查看和理解代码。
.HTML：
<div class="wrapper">
<div id="leftDiv">
<h3> It'S A GAME </h3>
</div>
<div id="rightDiv">
<h3 style="color:white"> It'S A TUTORIAL </h3>
</div>
</div>
.CSS：
html, body {
width: 100%;
height: 100%;
}
.wrapper {
width:90%;
margin:40px auto;
display:inline-block;
position:absolute;
height:200px;
}
#leftDiv {
width:50%;
background:yellow;
height:200px;
float:left;
display:inline-block;
}
#rightDiv {
width:50%;
background:black;
height:200px;
float:right;
display:inline-block;
}
JSFiddle
将第二个动画的持续时间更改为970
并将width用作100%而不是90%
小提琴