Где в этой функции добавить свойства анимации для добавления и удаления дополнительных стилей?Где добавить свойства анимации - jQuery CSS?
$('#close').click(function() {
$('img').removeClass('additionalStyle');
$(".theDiv").removeClass('visible').addClass('invisible');
});
https://jsfiddle.net/ChilledMonkeyBrain/a2txcLou/
Вот решение, CSS-код будет немного долго из-за все префикс поставщика:
https://jsfiddle.net/leojavier/a2txcLou/6/
<a href="#" class="trigger">
<img src="http://www.fillmurray.com/100/100">
</a>
<a href="#" class="trigger">
<img src="http://www.fillmurray.com/100/100">
</a>
JS
$('.trigger').click(function() {
$('img').removeClass('fadein-translate');
$(this).addClass('fadeout-translate');
});
CSS
.fadein-translate {
-moz-animation: fadein-translate 3s ease-in-out;
-o-animation: fadein-translate 3s ease-in-out;
-webkit-animation: fadein-translate 3s ease-in-out;
animation: fadein-translate 3s ease-in-out;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes fadein-translate {
from {
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
to {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@-moz-keyframes fadein-translate {
from {
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
to {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes fadein-translate {
from {
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
to {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
.fadeout-translate {
-moz-animation: fadeout-translate 1.5s ease-in-out;
-o-animation: fadeout-translate 1.5s ease-in-out;
-webkit-animation: fadeout-translate 1.5s ease-in-out;
animation: fadeout-translate 1.5s ease-in-out;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes fadeout-translate {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
to {
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity: 0;
}
}
@-moz-keyframes fadeout-translate {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
to {
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity: 0;
}
}
@-webkit-keyframes fadeout-translate {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
to {
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity: 0;
}
}
Может быть, вы хотите что-то вроде этого:
$('.trigger').click(function() {
$('img').fadeOut(function() {
$('img').addClass('visible').fadeIn();
});
});
Смотрите пример: https://jsfiddle.net/a2txcLou/3/
Это может быть просто сделать это, но функция должна удалить дополнительный стиль предыдущего выбора в то время как добавление дополнительных стилей к текущему выбору. Вы готовы помочь мне немного дальше? Я в настоящее время не так велик и контактирую с моими функциями, и я хочу сохранить его как d.r.y насколько возможно – chilledMonkeyBrain
Вы можете использовать этот скрипт, используя animate функция и transition атрибут CSS CSS
img.visible {
border: 50px solid black;
transition: all 1s ease-in-out;
}
JAVASCRIPT
$('.trigger').click(function() {
var handler=$(this);
if($('img.visible').length>0){
$('img.visible').animate({borderWidth:0},500,function(){
$(this).removeClass("visible").prop("style","");
handler.children("img").addClass("visible");
});
}else{
handler.children("img").addClass("visible");
}
});
Это красиво и очень близко к тому, что мне нужно. Можете ли вы помочь мне конкатенировать это? Нажатие на изображение 2 восстанавливает видимость изображения 1 – chilledMonkeyBrain
уверенный мужчина, дайте мне мин –
с добавленными тэгами https://jsfiddle.net/leojavier/a2txcLou/6/ – chilledMonkeyBrain