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 на страницу, я использую его для исчезновения большинства вещей, но список ошибок / функций, над которым я работаю.

Answer 2

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

Этот код появляется и исчезает.

Answer 3

На самом деле поместить то, что рекомендовал antpaw в код. Сделайте следующее.

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

Вы должны дать antpaw принятый ответ, если вам это нравится.

Answer 4

Если вам не нужны анимационные вещи, вы можете сделать это с помощью чистого CSS, используя селектор :hover psoudo, однако в jquery также есть метод .hover(), это поможет вам достичь этого эффекта. как то так: $('.my_less_used_divs').hover(fadeInFunction, fadeOutFunction);