Question

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

代码：

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

Answer 1

检查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);
    });
});

Answer 2

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

Answer 3

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

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

Answer 4

尝试此操作，在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');
    });
  });
});

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

4 个答案: