id хотел бы знать, возможно ли его сделать с переходом css3, этот элемент скользит вниз, после другого fadesIn. Heres скрипку, поэтому может делает его более ясным;) FiddleПосле fadeIn в другом элементе слайды вниз
Id, как это #text скользить вниз после того, как изображение выцветает не только прыгает вниз;)
CSS
#container img{
overflow: hidden;
max-height: 0;
transition: all 1s;
-webkit-transition: all 1s;
}
#container img.shown {
max-height: 20em;
}
JS
setTimeout(function() {
$("#container img").addClass('shown');
},1500);
HTML не изменились
к сожалению, вы не можете анимировать max-height к значению auto, так что вы должны выбрать разумную максимальную высоту-после того, как картина раскрывается
Вы можете сделать это следующим образом:
JS
setTimeout(function() {
$("#container img").fadeIn(1300, function() {
$("#text").slideDown(200);
});
}, 1500);
CSS
#text{
display:none;
}
Где она должна скользить вниз от если не скользили? – loveNoHate
@dollarVar, так как '# text' имеет css' display: none; 'он имеет размеры 0x0 (он скрыт). Теперь, когда вы вызываете 'slideDown()' на нем, он постепенно получает «естественный» рост и становится видимым. –
Танк для вашего ответа, однако я хотел знать решение css3;) –
Вам нужно отделить #text DIV от потока DOM. С помощью текущего способа он будет отображаться, текст всегда будет зависеть от изображения. Чтобы перейти отдельно, Вы смо л нужно CSS текст, чтобы быть абсолютным, а затем сдвиньте ее вниз в FadeIn обратного вызова:
setTimeout(function() {
$("#container img").fadeIn(1300, function() {
$("#text").animate({
top: '125px'
}, 1000);
});
}, 1500);
Вот обновленный Fiddle
Танк для вашего ответа, однако я хотел знать решение css3;) Я знаю, как оживить с jquery;) –
Также это выиграло 't дать этот эффект анимации в IE <10. –
он хотел CSS3 решение, это CSS3 ... и IE отстой :) – doodeec
awesome, thanks;) И спасибо за совет IE, однако я не забочусь об IE; сделать его статическим, если какой-то еще использует это (есть ли что-то 1?) xD –