Переход от поворота элемента Animate вращается (ответ Dyin) Я все еще не могу заставить его работать правильно.
Я хочу исчезнуть в div с jQuery.show(). Этот div содержит img. Теперь я хочу, чтобы img был увеличен в медленном режиме с помощью css-перехода и масштаба (не jQuery, потому что он намного более плавный) в самом начале команды.show().
Короче говоря, я хочу, чтобы div исчезал, в то время как содержащий img масштабируется (одновременно показывается и масштабируется). Но мне удается масштабировать только после завершения функции.show():
$( this ).show(800, function(){
$( ".bullets" ).removeClass("wait");
$( this ).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin");
});
Если я помещаю.addClass() вне функции, класс добавляется в исходный код, но img не масштабируется вообще, как это:
$( this ).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin");
$( this ).show(800, function(){
$( ".bullets" ).removeClass("wait");
})
CSS:
.zoomin {
transition: 24s linear;
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
.zoomout {
transition: 24s linear;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
Любая помощь будет высоко оценена!
Большое спасибо Джереми Тиллу! Самое простое решение с полным CSS:
Вместо jQuery.show() я просто добавил еще два класса:.visible и.hidden
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
И добавьте/удалите их в/из родительского DIV:
$( this ).removeClass("hidden").addClass("visible");
$( this ).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin");
Теперь, затухайте и масштабируйте работу одновременно! Благодарю!