Question

here is my entire jquery code :

$(function(){
    $(".sc").hover(function(){
        $(".sc span.L1").animate({marginRight:'0px'},100);
        $(".sc span.L2").animate({marginRight:'28px'},200);
        $(".sc span.L3").animate({marginRight:'5px'},300);
        $(".sc span.L4").animate({marginRight:'19px'},400);
    }, function(){
        $(".sc span.L1").animate({marginRight:'0px'},100);
        $(".sc span.L2").animate({marginRight:'0px'},200);
        $(".sc span.L3").animate({marginRight:'0px'},300);
        $(".sc span.L4").animate({marginRight:'0px'},400);
    });
    $(".sc").click(function(){
        if ($(".sc div#trigger").hasClass('passive')){
                $(".sc div#trigger").removeClass('passive');
                $(".sc div#trigger").addClass('active');
            }
            else { 
                $(".sc div#trigger").addClass('passive');
                $(".sc div#trigger").removeClass('active');
            };

    });

I want to stop hover effect if div#trigger.hasClass(‘passive’).
It means if the class of div#trigger is “passive”, I want the hover effect to be disabled, and when the class is “active”, to be enabled..

how can I use this code ?!

if ($(".sc div#trigger").hasClass('passive')) {
// codes to stop hover effect
}

Answer 1

The selector '.sc div#trigger' is unnecessarily verbose; since id’s are unique, simply use: '#trigger'

$(function(){
    $('.sc').hover(function(){
        if ( $("#trigger").hasClass('active') ) {
            $(".sc span.L1").animate({marginRight:'0px'},100);
            $(".sc span.L2").animate({marginRight:'28px'},200);
            $(".sc span.L3").animate({marginRight:'5px'},300);
            $(".sc span.L4").animate({marginRight:'19px'},400);
        }
    }, function(){
        if ( $("#trigger").hasClass('active') ) {
            $(".sc span.L1").animate({marginRight:'0px'},100);
            $(".sc span.L2").animate({marginRight:'0px'},200);
            $(".sc span.L3").animate({marginRight:'0px'},300);
            $(".sc span.L4").animate({marginRight:'0px'},400);
        }
    });
    // ...
});
​

---

Also, regarding your click event, it is possible to reduce some verbosity here as well; a little known/used function in the jQuery library .toggleClass() can add/remove a class depending on whether it is present or not. This is made even more powerful by the fact that you can trigger this effect on several classes simultaneously by specifying the names in a single string:

$(".sc").click( function() {
    $("#trigger").toggleClass('passive active');
});

Since an element here can only be in one state at a time, this simply turns off whichever one is currently associated with the element, and turns on the other.