jQuery animate и css margin

Question

У меня небольшая проблема с моей анимацией. Довольно просто я беру скрытый элемент и сползаю его. Этот скрытый элемент имеет верхний край 30px.

$(myselector).animate({ 
    opacity: 100 
    },function() { 
$(this).slideDown(function() { 
    // do stuff here 
}); 

});

Когда анимация начинается, у нее нет верхнего поля, но по мере того, как анимация запускается, она скользит вниз, пока она не будет иметь верхний край 30px.

Как я могу заставить анимацию начать с верхней границы 30px уже на месте?

Answer 1

Моя первая попытка воссоздать такое поведение привело точно то же самое ..

http://jsfiddle.net/Lvb6t/1/

То, что я сделал, было обернуть анимированный DIV в другой DIV, удалите margin-top:30px; из мультипликационного DIV, и применяется a padding-top:30px; к содержащему div.

http://jsfiddle.net/Lvb6t/4/

Answer 2

Альтернативным решением является удаление маржи-топ из DIV анимируемого и вместо того, чтобы полагаться на краю дна для элемента предшествующему.

Например ...

<div id="above">Content</div> 
<div id="below">Content</div> 

Вместо:

#below { 
    margin-top: 30px; 
} 

Вы бы использовать

#above { 
    margin-bottom: 30px; 
} 

И, конечно же, #above не нужно занимать любое видимое пространство на экране, если вы этого не хотите.

http://jsfiddle.net/Lvb6t/11/