Question

所以，我有这些链接的h1元素，我想为它们添加一个类，并在元素被盘旋之后淡化该类，然后onMouseOut删除类，同时淡化类。但是使用淡入淡出功能对我没什么用。看到它隐藏了元素。有什么想法吗？

jQuery(".categories h1 a").hover(
function () {
    jQuery(this).fadeIn("slow").addClass("active");
},
function(){
    jQuery(this).fadeOut("slow").removeClass("active");
});
});

谢谢！

修改:::

jQuery("h1").hover(function() {
      jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
      },function() {
      jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
      });
});

Answer 1

尝试使用jQuery UI .addClass和.removeClass。

$(function() {
    $(".categories h1 a").hover(function() {
        $(this).stop(true,true).addClass("active", 500);
    }, function() {
        $(this).stop(true,true).removeClass("active", 100);
    });    
});

DEMO（出于某种原因，它首次没有正确制作（淡入淡出）动画..但是之后就可以了。）

修改：已完成更新。

您还可以使用.animate来获得所需的效果。见下文，

$(function() {
    $(".categories h1 a").hover(function() {
        $(this).stop().animate({
            backgroundColor: "#a7bf51"
        }, 800);
    }, function() {
        $(this).stop().animate({
            backgroundColor: "#FFFFFF"
        }, 800);
    });

});

DEMO

Answer 2

如果您不想使用jquery UI，因为这将是一个额外的负载，您可以执行以下操作：

（当我的应用中使用了隐藏的＆＃39; bootstrap类时，对我很有用）

在删除课程时慢慢淡入：

$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000)

慢慢淡出，添加课程然后淡入：

$('.myClass').fadeOut(1000, function(){
    $(this).addClass('hidden'); //or any other class
}).fadeIn(10000)

希望这会简化某人的任务！

Answer 3

听起来你希望类的样式淡入。你应该查看animate（）：http://api.jquery.com/animate/

fadeIn简单地淡化元素。

Answer 4

我不认为你可以在课程之间交叉淡入淡出，但你可以使用animate功能。 animate允许您在指定时间内影响任何css变量。

http://api.jquery.com/animate/

我知道从css文件中删除了一些样式，但同样，我认为jQuery不会在类之间交叉淡入淡出。

Answer 5

如果你加载了jQuery UI库，你可以为toggleClass函数设置一个额外的参数。

通过css设置不透明度。

h1 a {
  opacity:0.8;
}

h1 a.hovered {
  opacity: 1.0;
}

然后

jQuery(".categories h1 a").hover(function(e) {
    $(this).toggleClass('hover', 1000);
}

1000是事件的毫秒计数器。因此，当在一秒钟内徘徊时，效果应该渐变为1.0不透明度，而在没有徘徊时，效果应在1秒内消失。

Answer 6

试试这个，这里是jsFiddle（enter link description here）：

<script type="text/javascript">
    jQuery(".categories h1").hover(function () {
            jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeIn("slow");
        },
        function() {
            jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeOut("slow");
    });
</script>
<style type="text/css">
    .categories h1 {
        background-color: rgb(200, 200, 200);
        display: block;
        padding: 5px;
        margin: 5px;
        width: 100px
    }
    .categories h1 a {
        display: none;
    }
</style>
<div class="categories">
    <h1><a href="#">Item 1</a></h1>
    <h1><a href="#">Item 2</a></h1>
    <h1><a href="#">Item 3</a></h1>
</div>

jQuery .addClass和.fadeIn？

6 个答案: