2

这是我的整个 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
}
4

4 回答 4

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

    });
于 2012-08-30T08:37:02.540 回答
1

选择器'.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');
});

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

于 2012-08-30T08:35:03.213 回答
0

可能是您正在寻找的东西：

if ($('.sc div#trigger').hasClass('passive')) {
  $('.sc span').stop(true, true);
}
于 2012-08-30T08:34:59.933 回答
0

丢失 div#trigger 中的 div，你不需要它，因为 ID 唯一地代表 DOM 树中的一个对象，如果你想改变一个元素的类，你可以通过两种方式......

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

当然，需要从一开始就初始化

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

于 2012-08-30T08:44:04.907 回答