Анимировать высоту документа jQuery

#jquery

Вопрос:

Я пытаюсь загрузить html-документ внутри расширяющегося div, и я хочу, чтобы анимировать расширение. Как сейчас, я могу только установить высоту, и она анимирует это, а затем просто показывает остальное.

Итак, я предполагаю, что я хочу, чтобы он загружал содержимое, а затем анимировал его, в основном там, где написано 300 пикселей, это должна быть высота моего html-документа (который отличается, поскольку это другой проект в моем портфолио).

HTML-код box_project2 находится в отдельном HTML-документе и должен определять анимированную высоту.

Ссылка на мой сайт, где вы можете увидеть актуальную проблему, нажав на некоторые из лучших проектов. http://richardhedberg.com/portfolionew/index.html #

 $('.thumbs2').click(function () {
    var idStr = ("project/"   $(this).attr('id'));
    var newHeight = 0;
    $('#show2').animate({ height: '300px', opacity: 0 }, function () {
        $('#workp').fadeIn('fast');
        $.scrollTo('#gohere', 300);

        $('#show2').load(idStr, function () {
            newHeight = $('#box_project2').outerHeight();
            $(this).animate({ height: newHeight }, 300, function () {
                $('#show2').delay(200).animate({ opacity: 1 }, 800);
                $('#close2').css({ 'display': 'block', 'height': '25px' });
            });
        });
    });
});




       <div id="close2">
       </div>  
       <div id="show2">
            <div id="box_project2">
            </div>
       </div>


.workp {
background:#fff;
position:relative;
z-index:999;
margin-bottom:30px;


}


#close2 {
position:absolute;
width:25px;
height:24px;
background:url(images/graphics/CloseIcon.png);
right:0px;
top:0px;
z-index: 9999;
display: none;
margin-left:-30px;



}
#show2 {
display: block;
height: 0px;
opacity: 1;
margin-left:-30px;
clear:both;

}

#box_project2 {

background:#fff;
text-align: left;
clear:both;
height:100%;


}

1. Я думаю, что вы анимируете, пока его непрозрачность равна 0. Я не совсем понимаю, но если вы настроите пример в jsfiddle. net это намного лучше сформулирует вашу проблему. 🙂

2. richardhedberg.com/portfolionew/index.html # если вы хотите, вы можете заглянуть на мой сайт.

Ответ №1:

И в чем ваш вопрос?

Сначала вы хотите выполнить загрузку, а затем анимацию при обратном вызове load?

Но если вы хотите показать пользователю, сколько данных было загружено, то сначала вам нужно написать свой собственный класс анимации. Затем в каждом кадре вы загружаете данные, а при обратном вызове переходите к следующему кадру. Обратите внимание, что в этом случае вы динамически изменяете URL-адреса, потому что у вас нет контроля над данными, поступающими от одного вызова ajax.

1. На самом деле, эта загрузка выполняется только после завершения анимации. Функция обратного animate() вызова выполняется в конце анимации, если я не ошибаюсь.

2. Извините, я очень устал и, вероятно, неясен, я хочу переключать свои проекты с помощью анимированного расширяющегося div, который загружается в отдельный HTML-файл (например. project1.html ). Итак, да, я думаю, я хочу сначала загрузить документ, а затем анимировать его.

Ответ №2:

Это

  $(this).animate({ height: newHeight }

вероятно, следует px добавить единицу и быть

  $(this).animate({ height: newHeight   'px' }