jQuery 在悬停时折叠 Div

Question

我有两个并排的 div。悬停时，我希望其中一个 div 占用 100% 的 width，另一个折叠。

我做了一个 jsfiddle here - 过渡很尴尬，因为我正在更改折叠 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);
        }
    );
});

Answer 1

我更改了 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/