Проблема с функцией slideDown () в jQuery

Question

Проверьте этот код: 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, он будет работать хорошо.Как я могу исправить?

Answer 1

Проблема заключается просто в макете модели. Вы можете добавить переполнение: скрытый, чтобы задать макет элемента в большинстве браузеров:

ul li .info {
  overflow: hidden;
}

Это тоже решит. Вы также можете изменить ширину, но это не обязательно.

Бонусная педантичная помощь, которую вы на самом деле не просили:

Вы используете «return false» для предотвращения события по умолчанию. Для этого есть функция, которая более эффективна с точки зрения того, как всплывают события. Просто передайте событие в функцию (вы можете использовать любое имя, которое хотите, но для ясности я называю его «событие»), а затем вызвать preventDefault() для него:

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

Answer 2

Установка:

ul li .info {
    float: left;
}

сделал это для меня (проверено в хроме)

Answer 3

Эта хитрость, кажется, решает проблему:

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

Answer 4

После игры в JS Fiddle, похоже, все получилось:

В вашем CSS ul li .info { }

Добавить: height: 50px;