2012-04-06 2 views
1

Я создал сценарий, который динамически загружает контент в div, и всякий раз, когда контент увеличивает высоту div, он оживляет высоту до фактической высоты.jquery animate height bouncing

Проблема в том, что она не только скользит вверх/вниз, она всегда скользит немного вверх, а затем вниз до нужной высоты.

Я бы хотел, чтобы он скользил прямо на нужную высоту без «подпрыгивания».

Вот часть сценария: main_content.html (html);

main_content.css("height", "auto"); 
var newContentHeight = main_content.height(); 
loader_div.hide(); 
main_content.height(prevContentHeight); 
main_content.fadeIn("fast", function() { 
    main_content.animate({ 
     "height": newContentHeight 
     }, 300); 
    }); 

Скрипт работает, единственная проблема заключается в том, что анимация не двигайте Div вверх или вниз на нужную высоту, он всегда скользит его немного вверх, а затем вниз до нужной высоты.

Является ли это какой-то разыскиваемой анимацией при использовании высоты анимации или что-то не так?

Редактировать: console logging newContentHeight (конечная высота div) похоже, что он собирает 2 высоты, а затем анимация сначала переходит к одному из них, а затем к другому, поэтому он выглядит как прыгающий. Работаю над этим.

edit2: да проблема там определенно, я очистил весь код, и все работает, за исключением того, что я получаю 2 атрибута из newContentHeight, используя console.log, похоже, что скрытый контент div имеет 2 высоты и 2 высоты передаются в .animate, поэтому он сначала поднимается, а затем вниз ... Kinda strange

+0

Можете ли вы создать jsfiddle для этого? –

+0

@Mateusz W i вчера сделал jsfiddle, но забыл его сохранить, не смог реплицировать весь сайт, а репликация скрипта работала отлично, а это не помогло. Немного поработал, и проблема в том, что я пытаюсь получить высоту div, пока он скрыт, и он не получает его, если я добавлю 'main_content.css ({display:" block "});' в выше код и THEN получить высоту div, он получает правильную высоту. Но мне нужно, чтобы это было скрыто. Использование взлома тоже не сработало (показывая его с краем -9999px, получите высоту и спрятайте его снова). – g0dl3ss

ответ

1

Не удалось решить эту проблему, я изменил сценарий ниже, и теперь все работает как надо. http://css-tricks.com/dynamic-page-replacing-content/ У этого есть точная анимация, которую я искал (за исключением нескольких шагов, легко реализуемых).

1

Я думаю, что проблема заключается не в скрипте, а в системе, выполняющей скрипт. Заменить время немного медленнее

main_content.animate({ 
"height": newContentHeight 
}, 3000);