jQuery的：如何淡出不经常使用的div的列表，以及淡入鼠标悬停？

Question

说你有一堆你不太多使用网页元素，jQuery的可以淡化他们一点，但只有当没有鼠标悬停？它必须渐退鼠标悬停！

Answer 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代码并将页面，我用它来淡出大多数的东西，但我工作的bug /功能列表

Answer 2

如果你不需要动画的东西，你可以通过使用:hover psoudo选择纯CSS做到这一点但是也有在jQuery的一个.hover()方法，它会帮助你达到这样的效果。是这样的：$('.my_less_used_divs').hover(fadeInFunction, fadeOutFunction);

Answer 3

要真正把什么antpaw推荐到代码中。执行下列操作。

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

您应该给antpaw接受的答案，如果你是这样的。

Answer 4

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

这个代码不会在淡入和淡出。