jquery的slideDown()的问题

Issue with jQuery's slideDown()

本文关键字：问题 slideDown jquery      更新时间：2023-09-26

查看此代码:http://jsfiddle.net/ZXN4S/1/

HTML: 

<div class="input">
    <input type="text" size="50" id="test_input">
    <input type="submit" value="send" id="test_submit">
</div>
<ul>
    <li class="clear">
        <div class="comment">
           <div class="image">
            <img src="http://www.chooseby.info/materiale/Alcantara-Black_granito_nero_naturale_lucido_3754.jpg">
           </div>
           <div class="info">
             <div class="name">Name</div>
             <div class="text">text</div>
             <div class="timestamp">timestamp</div>
           </div>
        </div>
    </li>
</ul>
jQuery: 

$(document).ready(function() {
    $("#test_submit").click(function() {
        $.post('/echo/json/', function(data) {
            last = $("ul li:first-child");
            new_line = last.clone();
            new_line.hide();
            last.before(new_line);
            new_line.slideDown('slow');
        });
        return false;
    });
});

如果你试着在输入字段中插入一些文本并点击提交，你可以看到我所说的问题。当它滑下时，滑块的高度不对，效果很难看。但如果你删除div info，它工作得很好。我该如何修复?

设置:

ul li .info {
    float: left;
}

为我做了(在chrome中测试)

这个技巧似乎解决了这个问题:

ul li .info {
    float: right;
    width: 485px; // fixed width to the div
}

问题在于布局模型。在大多数浏览器中，你可以添加overflow:hidden来为元素提供布局:

ul li .info {
  overflow: hidden;
}

也能解决它。你也可以选择固定你的宽度，但这不是必需的。

额外的迂腐的帮助，你实际上没有要求:

你正在使用"return false"来阻止默认事件。这里有一个函数，它可以更有效地描述事件是如何形成的。只需将事件传递给函数(您可以使用任何您想要的名称，但为了清晰起见，我将其称为"event")，然后在其上调用preventDefault():

$("#test_submit").click(function(event) {
  event.preventDefault()
// ... the rest of your code ... //
});

在JS Fiddle中播放后，这似乎已经完成了技巧:

在你的CSS中，ul li .info { }

添加:height: 50px;

相关文章：