jQuery verzögert fadeIn Wirkung

Question

Ich versuche nur zu diesen Schnipseln zwei einfache adjutments zu tun:

$(document).ready(function() { 
    $("span#poweroff a").click(function() { 
     $("body").append('<div class="overlay"></div>'); 
    }); 
}); 

Zuerst würde ich die body.append Aktion wie im Laufe der Zeit geschehen. Es ist nur ein Blackout-Overlay, aber ich würde gerne einblenden?

Zweitens, wenn jemand schwebt „span # poweroff ein“ Ich möchte, nach einer gewissen Zeit „span # eine .message poweroff“ zeigen, auch von fadeing in.

IRGENDWELCHE Guru dort bereit, rette mich, was könnte mich schon ziemlich lange mit Versuch und Irrtum belasten und mich zurechtweisen? Würde es sehr schätzen!

Answer 1

Sie müssen hart Code, um das Overlay div wie folgt aus:

<div class="overlay" style="display:none;"></div> 

Dann wird die jQuery wie folgt:

$(document).ready(function() { 
    $("span#poweroff a").click(function() { 
     $('.overlay').fadeIn('slow'); 
    }); 
}); 

Wenn ich verstehen Sie richtig, wenn jemand auf Spanne # poweroff klickt Es wird langsam die Überlagerung div zeigen.

Meine Frage an Sie ist, was passiert, wenn Sie die Maus über die Spannweite # poweroff a vor dem Klicken darauf und zeigt die .overlay? Wenn Sie darauf klicken, wird die verzögerte Show aktiviert, da Sie den Mauszeiger darüber bewegen müssen, um darauf zu klicken.

ist hier die jQuery ohne Behandlung, wenn wir warten müssen, für das Overlay sichtbar sein: .delay()

$(document).ready(function() { 
     $("span#poweroff a").mouseenter(function() { 
      $('.message').fadeIn('slow'); 
     }); 
     $("span#poweroff a").mouseleave(function() { 
      $('.message').fadeOut('slow'); 
     }); 
    }); 

Answer 2

Versuchen. Es ist wahrscheinlich das, wonach du suchst. Wie für den Code, hier sind die Funktionen sind Sie wahrscheinlich auf der Suche nach:

$(document).ready(function() 
{ 
    $('span#poweroff').click(function() 
    { 
    $('body').append('<div class="overlay"></div>'); /* Make sure it's hidden via CSS, and has *some* uniqueness. */ 
    $('.overlay:eq(0)').fadeIn(); /* ':eq(0)' selects the first .overlay element. If you want all of them to animate, remove ':eq(0)'. I would use an ID for this, though, so if you decide to, replace the selector with '#your_id'. It's not too hard */ 
    }); 

    $('span#poweroff a').hover(function() 
    { 
    $('span#poweroff a .message').delay(1000)fadeIn(); /* You can set your speeds here too. If you won't use the delay, just omit the function. */ 
    }, function() { 
    $('span#poweroff a .message').fadeOut(); /* If you want to, it can fade out. Otherwise, omit this function. */ 
    }); 
}); 

Dies würde als grobe Rahmen arbeiten (keine Garantien, wie ich für die Herstellung von kleinen Fehlern berüchtigt bin).

Viel Glück!