jQuery: Wie kann ich Fade-out eine Liste von weniger häufig verwendeten divs und Fade-In mit der Maus darüber?

StackOverflow https://stackoverflow.com/questions/2150278

Frage

Angenommen, Sie haben eine Reihe von Elementen auf einer Webseite, die Sie nicht viel nutzen, wie kann jQuery sie ein wenig verblassen, aber nur, wenn es keine Mouseover? Es muss mit der Maus darüber verblassen zurück!

War es hilfreich?

Lösung

Ich löste es wie folgt aus:

//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);
    });

 });

Früher habe ich es tatsächlich für FogBugz - sie haben ein Plugin, das Sie geben Sie Ihre eigene CSS + Javascript in die Seite können, ich benutze es die meisten Sachen zu verblassen, aber der Bug / Feature-Liste Ich arbeite an

Andere Tipps

Wenn Sie die Animation Zeug nicht brauchen Sie dies mit reinem CSS tun können, die :hover psoudo Wähler jedoch durch den Einsatz gibt es auch eine .hover() Methode in jquery, wird es Ihnen helfen, diesen Effekt zu erzielen. so etwas wie diese: $('.my_less_used_divs').hover(fadeInFunction, fadeOutFunction);

Um tatsächlich legt, was antpaw in Code empfohlen. Führen Sie die folgenden.

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

Sie sollten die akzeptierte Antwort, wenn Sie so geben antpaw.

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

Dieser Code führt Ein- und Ausblenden aus.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top