[jquery] Script optimieren / Animationen überlagern

[Dustin84]

Hallo,

ich habe hier mal eine Navigation gebastelt:
http://jsfiddle.net/bmrrJ/1/

Diese ist aber nicht "bulletproof".
Bewege ich die Maus etwas schneller von Agentur nach rechts bis zu Kontakt, so überlagert sich die Subnavigation.
Woran kann das liegen?

Ich bin kein jquery Profi, weshalb das Script sicher auch ausbaufähig ist, oder?

Gruß
D.

 

[jeipack]

Hey

var ele = $(this);
var target = $(ele).data("link-target")

ele ist schon ein jQuery Element, du musst es in der zweiten Zeile nicht nochmals in jQuery Kappseln.
Ausserdem würde ich ele gar nicht definieren und immer this verwenden. Macht es leserlicher.
Desweiteren hast du da ein Semikolon ( vergessen

All das wird dein Problem aber nicht lösen. Denke irgendwo hast du dich da mit der Klasse active und dem filter not animated verhedert. Wenn ich Zeit habe schaue ich mir es nachher mal durch.

 

[Dustin84]

Stimmt, liegt wohl daran:

				// Hide active subnavigation
				$('.navbar-second.active').stop().animate({
					marginTop: 0,
				}, 200, function() {
					$(this).removeClass('active');
				});
	
				// Show current subnavigation
				$(target).stop().animate({
					marginTop: '-'+target_height
				}, 200, function() {
					$(target).addClass('active');
				});

Das wird ja zeitgleich ausgeführt und deswegen kolidieren die "active" Klassen.

Es muss also erst geguckt werden, ob es ein "active" gibt und dann die Subnavi erst ausblenden. Erst danach darf die neue Subnavi eingeblendet werden.

Wie mache ich das am besten?

Habs so probiert (klappt nicht):

		$(".navbar-first > li > a").mouseover(function(){
			
			var ele = $(this);
			var slideout_wrapper = $(".navbar-collapse");
			var target = $(ele).data("link-target");
			var target_height = $(target).height()+'px';
			
			// Hide active subnavigation
			function hide_subnav(){
				$('.navbar-second.active').stop().animate({
					marginTop: 0,
				}, 200, function() {
					$(this).removeClass('active');
					// show current subnav
					show_subnav();
				});
			}
			// Show current subnavigation
			function show_subnav(){
				$(target).stop().animate({
					marginTop: '-'+target_height
				}, 200, function() {
					$(target).addClass('active');
				});
			}


			$(".navbar-collapse").stop().animate({
				paddingBottom: target_height
			}, 100, function() {
				
				if($('.navbar-second').hasClass('active')){
					hide_subnav();
				}else{
					show_subnav(); // on first hover
				}
				
			});
		});

 

[jeipack]

http://jsfiddle.net/bmrrJ/3/

 

[Dustin84]

thx, läuft!

 

[jeipack]

Gerne
Ein Danke und Thread auf erledigt setzen wären noch nett