JQuery Simple Menü rollend (ohne Animationswarteschlange)

Question

Ich habe eine einfache, ungeordnete Liste mit Listenelementen als Menüelement Ich habe das JQuery erstellt, um einen lustigen Überrollover -Effekt zu haben:

$('#nav ul ul li').hover(function(){
$(this).animate({ 
        marginLeft: "20px",
      }, 300 );
}, function(){
$(this).animate({ 
        marginLeft: "0px",
      }, 300 );
});

Das Problem mit diesem Skript ist, wenn Sie mehrmals über das Menü eilen, baut eine Animationswarteschlange auf. Ich habe versucht, .Stop () dazwischen zu verwenden, aber dann stoppt es auch die Animationen aus den anderen Listenelementen, die in jedem Fall zum Standardzustand zurückkehren sollten. Gibt es eine Möglichkeit, die Warteschlange pro Gegenstand zu stoppen ()? Aber nicht für die gesamte Liste?

Answer 1

Ich verstehe nicht, warum $ (das).Pause().animate (...) funktioniert nicht für Sie, aber Sie können diesen Ansatz auch ausprobieren:

$(":not(:animated)", this).animate(...)

Dies löst die Animation nur für Elemente aus, die derzeit nicht animiert sind