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＃触发器的类是“被动”，我希望禁用悬停效果，并且当类是“活动”时，要启用..

我该如何使用此代码？！

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

    });

Answer 2

选择器'.sc div#trigger'不必要地冗长;由于id是唯一的，只需使用：'#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);
        }
    });
    // ...
});

<小时/> 此外，关于您的点击事件，也可以在这里减少一些冗长; jQuery库.toggleClass()中一个鲜为人知/使用过的函数可以根据它是否存在来添加/删除一个类。通过在单个字符串中指定名称可以同时在多个类上触发此效果，这一点变得更加强大：

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

由于此处的元素一次只能处于一种状态，因此只需关闭当前与元素关联的一个元素，然后打开另一个元素。

Answer 3

愿你正在寻找：

if ($('.sc div#trigger').hasClass('passive')) {
  $('.sc span').stop(true, true);
}

Answer 4

在div＃trigger中丢失div，你不需要它，因为ID唯一地表示DOM树中的对象如果你想改变一个元素的类，你可以用两种方式来做...你的方式或只是

$(".sc #trigger").toggleClass("active");
$(".sc #trigger").toggleClass("pasive");

当然，需要从头开始初始化

现在回答你的问题，只需使用.stop() - 简单就是

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

4 个答案: