Question

$('#searchBox input').focus(function(){
                            console.log(true);
                            $('nav').addClass('searching');

 });
 $('#searchBox input').blur(function(){
                            console.log(false)
                            $('nav').removeClass('searching');
});

this works fine: adds and removes ‘searching’ class to the nav element depending focus or blur.

i wanted to add some animation and instead of animating each element, wanted to try the switchClass

$('#searchBox input').focus(function(){
                            console.log(true);
                           // $('nav').addClass('searching');
                            $('nav').switchClass( 'no-existe',  "searching", 1000 );
                        });
                        $('#searchBox input').blur(function(){
                            console.log(false)
                            //$('nav').removeClass('searching');
                            $('nav').switchClass(  "searching",'no-existe', 1000 );
});

no-existe is a non existing class (figured out i needed to pass something in the remove/add parameter)
wich logs the true/false but doesn’t alter nav’s class

any idea why?

Answer 1

switchClass() probably checks to confirm that the selected element has class “no-existe” before it adds class “searching”. I don’t see anything in the docs to support the way you’re calling it.