jQuery: كيف يمكنني التلاشي في قائمة من divs أقل استخدامًا ، وتتلاشى على Mouseover؟

Question

لنفترض أن لديك مجموعة من العناصر على صفحة ويب لا تستخدمها كثيرًا ، كيف يمكن أن تتلاشى jQuery قليلاً ، ولكن فقط عندما لا يكون هناك ماوس؟ يجب أن تتلاشى مرة أخرى على Mouseover!

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

إذا لم تكن بحاجة إلى أشياء الرسوم المتحركة ، يمكنك القيام بذلك باستخدام CSS النقي باستخدام :hover محدد psoudo ولكن هناك أيضا ملف .hover() الطريقة في jQuery ، سوف تساعدك على تحقيق هذا التأثير. شيء من هذا القبيل: $('.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);

هذا الرمز يتلاشى ويتلاشى.