jQueryの：どのように私は、使用頻度の低いdiv要素のリストを、フェードアウトんし、マウスオーバーでフェードイン？

Question

と言うが、あなたはjQueryのは彼らに少しフェードできるか、あまり使いませんが、何のマウスオーバーが存在しない場合にのみ、Webページ上の要素の束を持っていますか？それは、マウスオーバーに戻ってフェードインする必要があります！

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を挿入することができますプラグインを持って、私はほとんどのものが、私が働いているバグ/機能リストをフェードアウトするためにそれを使用する

Answer 2

あなたはしかし、jqueryの中:hover方法もありますが、.hover()のpsoudoセレクタを使用することにより、純粋なCSSでこれを行うことができ、アニメーションのものを必要といけない場合、それはこの効果を達成するためのお手伝いをします。このような何か：$('.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);

このコードは、フェードインを行い、フェードアウトます。