animation: scaleUp 0.3s linear 0.4s forwards;
animation: scaleDown 0.3s linear forwards;
Greetings! I'm currently working on adding animations to my content filtering functionality. Specifically, I want to incorporate the aforementioned CSS rules into the JavaScript code below in order to hide and show elements based on their class. However, I am unsure about how to properly structure the tags due to my limited knowledge of JavaScript. Any assistance with this matter would be greatly appreciated. Thank you.
$(document).ready(function() {
$('#filterOptions li a').click(function() {
// Get the class attribute of the clicked item
var ourClass = $(this).attr('class');
// Remove active class from all buttons
$('#filterOptions li').removeClass('active');
// Add active state to clicked button
$(this).parent().addClass('active');
if(ourClass == 'all') {
// Display all items
$('#ourHolder').children('div.item').show();
}
else {
// Hide elements that do not share ourClass
$('#ourHolder').children('div:not(.' + ourClass + ')').hide();
// Show elements that share ourClass
$('#ourHolder').children('div.' + ourClass).show();
}
return false;
});
});