1

假设你在一个网页上有一堆你不经常使用的元素，jQuery 怎么能让它们淡化一点，但只有在没有鼠标悬停的情况下？它必须在鼠标悬停时淡出！

4

4 回答 4

1

我是这样解决的：

//list the items you want to fade out in normal selector format
var arr = [ "#navTop","#banner","#idViewToolbar","#fbsidebar","#idActionP","table.noBorder" ];


//delay function by Clint Helfers
$.fn.delay = function( time, name ) {

    return this.queue( ( name || "fx" ), function() {
        var self = this;
        setTimeout(function() { $.dequeue(self); } , time );
    } );

};

$.each( arr, function(i, l){
   jQuery(l).fadeTo(600, 0.10);
   jQuery(l).mouseenter(function(){
        jQuery(this).fadeTo(600, 1);
    });

       jQuery(l).mouseleave(function(){
        jQuery(this).delay(5000).fadeTo(600, 0.10);
    });

 });

我实际上将它用于 FogBugz - 他们有一个插件，可让您将自己的 CSS + Javascript 插入页面，我用它来淡出大多数内容，但我正在处理的错误/功能列表。

于 2010-01-27T21:17:09.727 回答
0

如果你不需要动画的东西，你可以使用:hoverpsoudo 选择器使用纯 css 来做到这一点，但是 jquery 中也有一个.hover()方法，它将帮助你实现这个效果。像这样的东西：$('.my_less_used_divs').hover(fadeInFunction, fadeOutFunction);

于 2010-01-27T21:14:42.557 回答
0

实际将 antpaw 推荐的内容放入代码中。请执行下列操作。

$(".my_less_used_divs").hover(function() {
    $(this).css("opacity", 1);
}, function() {
    $(this).css("opacity", .5);
}).css("opacity", .5);

如果你喜欢这个，你应该给 antpaw 接受的答案。

于 2010-01-27T22:13:11.843 回答
0 
$(".divfade").hover(function() {
    $(this).fadeTo("slow", 1);
}, function() {
    $(this).fadeTo("slow" , .5);
}).css("opacity", .5);

此代码确实淡入淡出。

于 2012-04-17T10:43:18.607 回答