Question

我有两个div并排。我在悬停时希望其中一个div占用width的100％而另一个占用崩溃。

我制作了一个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/

Answer 2

我知道你不喜欢动画完成时的文本换行。您可以添加以下css以防止文本中断。

h3{
 white-space:nowrap;
}

See updated fiddle

不是问题的一部分，但强烈建议将样式保存在css文件中而不是内联（除非你的性能受到影响）。 See this updated fiddle例如

Answer 3

您需要在CSS上为Left Div和Right Div添加两个条目：

white-space: nowrap;
overflow: hidden;

除了你使用的hoverIntent并非真正需要之外，你可以使用hover

参考 LIVE DEMO

所有这些我已经修改了你的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;
}

UPDATE：

作为您的评论，您希望停止排队等待悬停。最好的修复方法是使用.stop()函数并稍微减小宽度。

参考 LIVE DEMO - 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);
});

Answer 4

当您将div放在div中时，始终 inline-block 为display。
使用 html 宽度和高度覆盖body和100%

html,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

Answer 5

将第二个动画的持续时间更改为970

并使用width作为100%而不是90%

fiddle

jQuery崩溃Div悬停

5 个答案:

HTML：

JQuery的：

CSS：

UPDATE：

JQuery的：

更新

JSFiddle