jQuery: Wie eine jQuery Hover-Funktion erstellen?

Question

Ich möchte zwei Funktionen schaffen, was Fades in und aus einem Element.

Dies ist, was ich bisher getan hat, aber das Problem dabei ist, dass, wenn Sie die Maus bewegen, während Sie in dem hovered- Elemente sind es zu vibrieren beginnt: | Wie soll ich es nicht vibrieren und Arbeit richtig machen?

<script language="javascript" type="text/javascript">
 function hoverIn(target, speed){
     $(target).fadeIn(speed); 
 }

 function hoverOut(target, speed){
     $(target).fadeOut(speed); 
 }
</script>

LIVE VIEW - schauen Sie sich das Problem in Live

Answer 1

Eine bessere Möglichkeit, dies zu tun wäre unauffällig Skript verwenden, die Hauptsache, Sie wollen, ist ein .stop() Aufruf der vorherigen Animation zu stoppen, wie folgt aus:

<script type="text/javascript">
 function hoverIn(target, speed){
     $(target).stop(true, true).fadeIn(speed); 
 }

 function hoverOut(target, speed){
     $(target).stop(true, true).fadeOut(speed); 
 }
</script>

Dies ist immer noch ein Problem, weil mouseover und mouseout Feuer beim Betreten / verlassen eines Kindes. Allerdings .hover() verwendet mouseenter und mouseleave , die nicht das gleiche Problem leiden und Ihr "Vibration" Problem beseitigen.

Die unauffällige Version sieht wie folgt aus:

$(function() {
  $("ul > li").hover(function() {
    $(this).find("ul").stop(true, true).fadeIn('fast');
  }, function() {
    $(this).find("ul").stop(true, true).fadeOut('fast');
  });
});​

Sie können es sehen hier oder noch kürzere Version:

$(function() {
  $("ul > li").hover(function() {
    $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast');
  });
});​

Sie können das testen Beachten Sie, dass alle diese unauffällige Ansätze verwenden keine Inline-Javascript und die Arbeit für mehrere Kindermenüs an.