jQuery DIV slideDown () Изменение размера Перейти - PullRequest
Новая
       2

jQuery DIV slideDown () Изменение размера Перейти

0 голосов
/ 11 декабря 2011

Это похоже на jQuery slideDown Snap Back Issue , однако немного отличается. Вы можете посетить этот сайт и просмотреть раздел «Фотографии», чтобы увидеть проблему. Если вы щелкнете по альбому, содержимое будет загружено в поле, но при изменении его размера оно будет по-прежнему иметь ту же высоту, поэтому останавливается на этой высоте. Затем он быстро прыгает на правильную высоту. Есть идеи? 

var jBody = $("#pics .inner");
var jTitle = $("#pics .title");

$("#pics .album-container a").click( function(e) {

    var strURL = $(this).attr("href");

    var strName = strURL.substr( strURL.indexOf("name=") + 5 );

    jBody.slideUp(100);

    $.get(

        strURL,

        function(strData) {

            jTitle.text("Pictures - " + strName);

            jBody.html(strData).slideDown(1000, "easeOutBounce");

        }

    );

    e.preventDefault();

} );

$("#pics a.back").click( function(e) {

    var strURL = $(this).attr("href");

    jBody.slideUp(100);

    $.get(

        strURL,

        function(strData) {

            jTitle.text("Pictures");

            jBody.html(strData).slideDown(1000, "easeOutBounce");

        }

    );

    e.preventDefault();

} );

Ответы [ 2 ]

1 голос
/ 11 декабря 2011

Проблема в том, что jQuery не может вычислить фактическую высоту контейнера, потому что вы никогда не указываете высоту, и содержимое внутри, вероятно, не полностью загружается при запуске анимации, если вы добавляете 

div.album-container {
      height:166px;
}
div.picture {
   height: 133px;
}

Он будет работать правильно, если вам нужно, чтобы он был более настраиваемым, вы можете использовать min-height или установить высоту с помощью jQuery после вставки HTML-кода и до его анимации.

Если вы хотите проверить это, вы можете войти console.log(jBody.height()) после установки html, чтобы вы могли видеть фактическую полную высоту анимируемого элемента.

0 голосов
/ 11 декабря 2011

Может быть, проверить что-то вроде: 

jBody.html(strData).delay(500).slideDown(1000, "easeOutBounce");

Просто посмотрите, есть ли проблема с анимацией, начинающейся до визуализации высоты изображения.

...