This is frustrating. I did this last night, and it was working fine. I cloned the project today, and it’s not working as it should.
.animatedCardEnterFromLeft {
animation: EnterFromLeft 0.75s ease-in-out;
}
@keyframes EnterFromLeft {
from {
opacity: 0;
transform: translateX(-300px);
}
to {
opacity: 1;
}
}
.animatedCardEnterFromRight {
animation: EnterFromRight 0.75s ease-in-out;
}
@keyframes EnterFromRight {
from {
opacity: 0;
transform: translateX(300px);
}
to {
opacity: 1;
}
}
These 2 are doing the exact same animation when applied to elements which is fading in from the left to right. When I change the duration of 1 of them to 5s for example, then there is a clear difference in animations. This means they are both being added to the elements as classes properly. But why are they doing the same animation?
Edit:
HTML Code
<article class="classicArticle">
<h4>Announcements and News</h4>
<div class="card-deck">
<div class="card cardFirst">
<img class="card-img-top" src="images/advising.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text homepageDate"><small class="text-muted">3/17/2023</small></p>
<h5 class="card-title">Reminder: Advising and Registration Periods for Summer and Fall 2023
</h5>
<p class="card-text">This is to inform you that the online course registration for the
Summer
and Fall 2023 semesters will take place according to the following schedule:</p>
<a href="#" class="homepageReadMore">Read More...</a>
</div>
</div>
<div class="card cardFirst">
<img class="card-img-top" src="images/earthquake.png" alt="Card image cap">
<div class="card-body">
<p class="card-text homepageDate"><small class="text-muted">3/15/2023</small></p>
<h5 class="card-title">Understanding Earthquakes and their Impacts Seminar</h5>
<p class="card-text">On the behalf, ASCE_RHU student chapter invites you to attend a Seminar
entitled “Understanding Earthquakes and their Impacts” held by the Dr. Mehedeen Machaka
</p>
<a href="#" class="homepageReadMore">Read More...</a>
</div>
</div>
<div class="card cardFirst">
<img class="card-img-top" src="images/ramadan.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text homepageDate"><small class="text-muted">3/13/2023</small></p>
<h5 class="card-title">Join us for "Ramadan Gathers Us" and Support Small Businesses</h5>
<p class="card-text">As part of our mission to support and give back to the community, we
are
excited to announce our upcoming event, "Ramadan Unites Us!</p>
<a href="#" class="homepageReadMore">Read More...</a>
</div>
</div>
<div class="card cardSecond homepageHidden">
<img class="card-img-top" src="images/connectWorld.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text homepageDate"><small class="text-muted">3/11/2023</small></p>
<h5 class="card-title">Invitation to Attend Connecting the World with Intelligence
</h5>
<p class="card-text">The RHU-IEEE Student Branch would like to invite you to an upcoming
workshop on enterprise security challenges that will be presented by Alumnus Ahmad
Ramadan
</p>
<a href="#" class="homepageReadMore">Read More...</a>
</div>
</div>
<div class="card cardSecond homepageHidden">
<img class="card-img-top" src="images/economy.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text homepageDate"><small class="text-muted">3/9/2023</small></p>
<h5 class="card-title">Is our Economy Heading towards The Great Fallout?</h5>
<p class="card-text">"The Future of The Lebanese Lira and The Fate Of The Deposits"
Lebanon is undergoing one of the biggest crises it has faced since the end of the civil
war
</p>
<a href="#" class="homepageReadMore">Read More...</a>
</div>
</div>
<div class="card cardSecond homepageHidden">
<img class="card-img-top" src="images/bakesale.png" alt="Card image cap">
<div class="card-body">
<p class="card-text homepageDate"><small class="text-muted">3/7/2023</small></p>
<h5 class="card-title">Students Hosting A Bake Sale in the Green Field</h5>
<p class="card-text">On behalf of ASCE_RHU student Chapter invite you to be part of the bake
sale held on Thursday 16th March near the cafeteria from 11:00 am to 12:00 pm</p>
<a href="#" class="homepageReadMore">Read More...</a>
</div>
</div>
<div class="card cardThird homepageHidden">
<img class="card-img-top" src="images/future.jpeg" alt="Card image cap">
<div class="card-body">
<p class="card-text homepageDate"><small class="text-muted">3/5/2023</small></p>
<h5 class="card-title">Competition: What Will Our Future Look Like?</h5>
<p class="card-text">The RHU Communication and Alumni Relations Office, Coop, and Career
Services will help answer this question during the Careers of the Future seminar.</p>
<a href="#" class="homepageReadMore">Read More...</a>
</div>
</div>
<div class="card cardThird homepageHidden">
<img class="card-img-top" src="images/shortstory.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text homepageDate"><small class="text-muted">3/3/2023</small></p>
<h5 class="card-title">Short story contest: The Lebanon of our dreams</h5>
<p class="card-text">Inspired by a common purpose of the organizers to make the young
generation
dream and believe in a brighter future, he competition gives gives opportunities</p>
<a href="#" class="homepageReadMore">Read More...</a>
</div>
</div>
<div class="card cardThird homepageHidden">
<img class="card-img-top" src="images/python.jpeg" alt="Card image cap">
<div class="card-body">
<p class="card-text homepageDate"><small class="text-muted">3/1/2023</small></p>
<h5 class="card-title">Workshop: Python Programming - from Beginner to Master </h5>
<p class="card-text">This two-session series will take you from beginner to master, covering
the
basics of Python programming in the first session and advanced techniques in the second
session.</p>
<a href="#" class="homepageReadMore">Read More...</a>
</div>
</div>
</div>
<div id="homepageNewsButtons">
<button id="homepagebtnOne" class="homepageActivated">1</button>
<button id="homepagebtnTwo">2</button>
<button id="homepagebtnThree">3</button>
</div>
JS Code:
let btnOne = $("#homepagebtnOne");
let btnTwo = $("#homepagebtnTwo");
let btnThree = $("#homepagebtnThree");
btnOne.click(function () {
$(".cardFirst").each(function (i) {
$(this).removeClass("homepageHidden");
$(this).addClass("animatedCardEnterFromRight");
});
$(".cardSecond").each(function (i) {
$(this).addClass("homepageHidden");
});
$(".cardThird").each(function (i) {
$(this).addClass("homepageHidden");
});
btnOne.addClass("homepageActivated");
btnTwo.removeClass("homepageActivated");
btnThree.removeClass("homepageActivated");
});
btnTwo.click(function () {
$(".cardSecond").each(function (i) {
$(this).removeClass("homepageHidden");
if (btnOne.hasClass("homepageActivated")) {
$(this).removeClass("animatedCardEnterFromLeft");
$(this).removeClass("animatedCardEnterFromRight");
$(this).addClass("animatedCardEnterFromLeft");
}
else if (btnThree.hasClass("homepageActivated")) {
$(this).removeClass("animatedCardEnterFromRight");
$(this).removeClass("animatedCardEnterFromLeft");
$(this).addClass("animatedCardEnterFromRight");
}
});
$(".cardFirst").each(function (i) {
$(this).addClass("homepageHidden");
});
$(".cardThird").each(function i() {
$(this).addClass("homepageHidden");
});
btnOne.removeClass("homepageActivated");
btnTwo.addClass("homepageActivated");
btnThree.removeClass("homepageActivated");
});
btnThree.click(function () {
$(".cardSecond").each(function (i) {
$(this).addClass("homepageHidden");
});
$(".cardFirst").each(function (i) {
$(this).addClass("homepageHidden");
});
$(".cardThird").each(function i() {
$(this).removeClass("homepageHidden");
$(this).addClass("animatedCardEnterFromLeft");
});
btnOne.removeClass("homepageActivated");
btnTwo.removeClass("homepageActivated");
btnThree.addClass("homepageActivated");
});
Picture of the elements from the console
PIC
2
Answers
The code seems to work perfectly.
as by the name suggest one making animate from left to right and the other one is right to left.
and it works perfectly fine. it just seems there are problem in your jquery in adding and removing the class