Question

我已经扩展了div工作，但似乎转换在带有文本的div上突然打开，但是平滑过渡关闭。我的代码如下，是jsFiddle演示的链接。

如何让开放时的过渡变得像在结束时一样平滑？

演示：http://jsfiddle.net/phamousphil/s34fA/1/

HTML：

        <div class="grid_6 containerExpand collapsedExp">
        <div class="headerExpand"><a href="http://www.google.com">the google</a><br /></div>
        <div class="contentExpand">
        <p>google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!</p><br />
        <p>google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!</p>
    </div>
</div>
<div class="grid_6 containerExpand collapsedExp">
    <div class="headerExpand"><a href="http://www.yahoo.com">YAHOO</a><br /></div>
    <div class="contentExpand">
        <p>Yahoo!.</p>
    </div>
</div>

CSS：

.containerExpand {
}

.headerExpand {
cursor: pointer;
}

.headerExpand:hover {
background-color: #d3d3d3;
}

.collapsedExp .headerExpand {
}

.collapsedExp .headerExpand:hover {
background-color: #d3d3d3;
}
.contentExpand {
height: auto;
min-height: 100px;
overflow: hidden;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
}

.collapsedExp .contentExpand {
min-height: 0px;
height: 0px;
}

JavaScript的：

$(function(){
    $('.headerExpand').click(function(){
        $(this).closest('.containerExpand').toggleClass('collapsedExp');
        $(".headerExpand").find("a").click(function(e){e.stopPropagation()});
    });

});

Answer 1

这是一种简化的代码方法，似乎可以很好地测试。

DEMO jsFiddle

HTML：

<div class="heading">the google</div>
<div class="content">
    <p>google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!</p><br />
    <p>google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!</p>
</div>

<div class="heading">YAHOO</div>
<div class="content">
    <p>Yahoo!.</p>
</div>

CSS：

.heading {
    cursor: pointer;
}
.heading:hover {
    background-color: #d3d3d3;
}
.content {
    padding: 5px 10px;
}

jQuery的：

jQuery(".content").hide();
    //toggle the componenet with class msg_body
jQuery(".heading").click(function() {
    jQuery(this).next(".content").slideToggle(300);
});

希望这适合你！

Answer 2

转换浏览器时必须知道每个值的边界，以便它知道如何正确设置动画。在div扩展时的当前代码中，它正在从0px转换为100px（最小高度），因为这些是已知值。转换完成后，浏览器会调整div的大小以适应文本。我不知道如何达到你想要的确切效果，但这里有几个选择：

设置高度：如果div中的文字相对相似，请在contentExpand类中设置height: 150px（或类似）
更改font-size：

.collapsedExp .contentExpand { min-height: 0px; height: 0px; font-size: 0; }

这些选项中的任何一个都可以用于轻型设计。如果您对使用较重的框架感兴趣，可以考虑使用具有此类弹出功能的Twitter Bootstrap，但这可能对您想要的内容有些过分。祝你好运！

jQuery Toggle（扩展Div）与文本的不一致转换

2 个答案: