I am working with two objects: object1 and object2.
object1 is set to have an animation delay of 0s
object2 has an animation delay of 0.5s
When you click on 1., both objects are assigned the class .animation, which works as expected. However, object2 waits for 0.5s before animating, which is the desired behavior.
The issue arises when you click on 2.. Both objects are assigned the class .animation-back, object1 behaves correctly, but object2 disappears for 0.5s before animating.
I understand that this happens because the .animation class is being removed at the same time as adding the .animation-back class, causing a delay. Removing .removeClass('animation-back') triggers a loop or unexpected behavior.
$(".text1").click(function(){
$(".object1").addClass('animation').removeClass('animation-back');
$(".object2").addClass('animation').removeClass('animation-back');
});
$(".text2").click(function(){
$(".object1").addClass('animation-back').removeClass('animation');
$(".object2").addClass('animation-back').removeClass('animation');
});a{
font-size:150%;
}
.text1{
cursor:pointer;
margin-left:42px;
font-size:150%;
}
.text2{
cursor:pointer;
margin-left:42px;
font-size:150%;
}
.object1{
width: 100px;
height: 100px;
background: red;
margin:2em;
margin-left: 150px;
position: relative;
opacity: 0;
}
.object1.animation{
animation: animation1 0.7s ease-in-out 0s 1 forwards;
}
.object1.animation-back{
animation: animation2 0.7s ease-in-out 0s 1 forwards;
}
.object2{
width: 100px;
height: 100px;
background: red;
margin:2em;
margin-left: 150px;
position: relative;
opacity: 0;
}
.object2.animation{
animation: animation1 0.7s ease-in-out 0.5s 1 forwards;
}
.object2.animation-back{
animation: animation2 0.7s ease-in-out 0.5s 1 forwards;
}
@keyframes animation1 {
from { margin-left: 150px; opacity: 0; }
to { margin-left: 0px; opacity: 1; }
}
@keyframes animation2 {
from { margin-left: 0px; opacity: 1; }
to { margin-left: 150px; opacity: 0; }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text1"><a>1.</a></div>
<div class="text2"><a>2.</a></div>
<div class="object1"></div>
<div class="object2"></div>Any advice would be greatly appreciated. Thank you and have a wonderful day!