Question

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，那么效果很好。我该如何解决？

Answer 1

环境：

ul li .info {
    float: left;
}

为我做了（用铬测试）

Answer 2

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

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

Answer 3

问题只是布局模型。您可以添加overflow：hidden以在大多数浏览器中为元素提供布局：

ul li .info {
  overflow: hidden;
}

也会解决它。您也可以选择修改宽度，但这不是必需的。

你实际上没有要求的奖励迂腐帮助：

您正在使用“return false”来阻止默认事件。有一个功能，在事件如何泡沫方面更有效。只需将事件传递给函数（您可以使用任何您想要的名称，但为了清楚起见，我将其称为“事件”），然后在其上调用preventDefault()：

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

Answer 4

在JS Fiddle演奏之后，这似乎已经成功了：

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

添加：height: 50px;

jQuery slideDown（）的问题

4 个答案: