Currently, I have a search box that can show or hide by changing its width. Now, my goal is to add a class to the search icon when its width exceeds zero.
$("#search input").animate({width: "0px"}, 0);
var searchWidth = $('#search input').width();
$('#search i').click( function() {
//Change the width (show it)
var toggleWidth = $("#search input").width() == 150 ? "0px" : "150px";
$('#search input').animate({ width: toggleWidth });
//Make the search icon red
if ( searchWidth > 0 ) {
$("#search i").addClass("active");
} else {
$("#search i").removeClass("active");
}
});
Initially, I tried using toggleClass, but encountered issues when clicking too quickly during the animation. This led me to the approach above...
//Change the width (show it)
var toggleWidth = $("#search input").width() == 150 ? "0px" : "150px";
$('#search input').animate({ width: toggleWidth });
//Make the search icon red
$("#search i").toggleClass("active");