jQuery UI： - 切换类，但添加悬停效果？

我有以下jQuery代码，当您将鼠标悬停在“li”上时，将类添加到“p”标签中......但是，如何通过添加转换效果而不是仅仅是一个直接开关来使这更有趣？jQuery UI： - 切换类，但添加悬停效果？

代码：

$(document).ready(function() { 
    $('li').hover(function() { 
     $('p', this).toggleClass('hovered'); 
    }); 
});

来源

2012-01-14 CodeyMonkey

当你说“添加淡入淡出效果”你意味着元素应该“淡入”（不可见，可以慢慢看到），或者只是阶级过渡应该平滑（例如：类属性从最终阶级的值“漂移”到最终阶级的值）？ – mgibsonbr 2012-01-14 17:07:05

是的，过渡应该是平滑的......就像从红色渐变为蓝色......而不是首先变黑......目前下面的解决方案似乎首先变黑。 – CodeyMonkey 2012-01-14 17:09:55

更新了我的回答，它应该像您现在说的那样行事。大多数人使用** fade **这个词使人感到困惑，因为它意味着你希望元素在某个点消失/出现。我建议编辑替换此表达式为“过渡效果”，好吗？ – mgibsonbr 2012-01-14 17:25:11

检查animate功能，能够绘制两个类之间的过渡。

编辑：对不起，错误的方法。你要找的是switchClass方法。

这里是switchClass的demo。如果您有两个班，并且想从一个班转到另一个班，这很有用。如果您只想添加/删除一个班级，请参阅Wouter J的答案。

更新：看来你需要两个类才能工作。另请注意，switchClass需要jQuery UI才能工作。这里有一个例子：

HTML：

<li> 
    <p class="regular">Test</p> 
</li>

CSS：

p.regular { color:red } 
p.hovered { color:blue }

的JavaScript：

$(document).ready(function() { 
    $('li').hover(function() { 
     $('p', this).switchClass('regular','hovered', 2000); 
    },function() { 
     $('p', this).switchClass('hovered','regular', 2000); 
    }); 
});

来源

2012-01-14 16:57:06 mgibsonbr

差不多......当你将鼠标悬停时，它不会恢复到“常规”......任何想法？ – CodeyMonkey 2012-01-14 17:29:32

@CodeyMonkey当然！ 'hover'接受悬停结束时要运行的附加功能。答案已更新。 – mgibsonbr 2012-01-14 17:34:04

太好了 - 最后确定....淡出有点讨厌..例如。跳动......即使设置为100或200 ......我该如何更改默认效果？ – CodeyMonkey 2012-01-14 17:36:17

var clone = $("<p>"); 
$('div').hover(
    function() { 
      clone.remove(); 
      clone = $("p", this).clone(); 
      $("p", this).after(clone); 
      clone 
       .hide() 
       .css({ 
        position: "absolute", 
        top: $("p", this).offset().top, 
        left: $("p", this).offset().left, 
        width: $("p", this).width(), 
        height: $("p", this).height(), 
        "z-index": 2 
       }) 
       .addClass("hovered") 
       .fadeIn(); 
    }, 
    function() { 
      clone 
       .fadeOut("normal", function() { 
        $(this).remove(); 
       }); 
    } 
);

来源

2012-01-14 16:57:09 noob

嗨，这黑色/ disapears然后淡化到正确的类，任何机会，这可以工作，而无需先穿戴位？ – CodeyMonkey 2012-01-14 17:00:40

文本消失，它跳转到黑色，它需要一个平稳的过渡。谢谢 – CodeyMonkey 2012-01-14 17:20:26

好的我改变了。 – noob 2012-01-14 19:36:26

试试这个，你甚至add可以更effect加入options中fedeIn和fadeOut

$(document).ready(function() { 
    $('li').hover(function() { 
    $('p', this).fadeIn(function(){ 
     $(this).addClass('hovered'); 
    }); 
    },function(){ 
    $('p', this).fadeOut(function(){ 
     $(this).removeClass('hovered'); 
    }); 
    }); 
});

来源

2012-01-14 16:57:09

您正在使用jQuery UI，所以你可以使用.toggleClass(class, duration)，其中持续时间是淡出的持续时间：

$(document).ready(function() { 
    $('li').hover(function() { 
    $('p', this).toggleClass('hovered', 1000); // 1000ms = 1s 
    }); 
});

来源

2012-01-14 17:02:29

它似乎没有工作... $（document）.ready（function（）{（'li'）。hover（function（）{（'p'，this）.toggleClass（ 'hovered'，500）; }）; }）; – CodeyMonkey 2012-01-14 17:05:13

jQuery UI： - 切换类，但添加悬停效果？

回答

相关问题