javascript - 如果元素具有 A 类，则在鼠标离开时停止悬停效果

Question

这是我的整个 jquery 代码:

$(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');
            };

    });

如果 div#trigger.hasClass('passive') 我想停止悬停效果。这意味着如果 div#trigger 的类是“被动的”，我希望悬停效果被禁用，而当类是“事件的”时，我希望悬停效果被启用..

如何使用此代码？!

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

Answer 1

$(function(){
    $(".sc .active").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');
            };

    });