Navigation öffnet verzögert

[Countii]

Hallo, ich habe die Suchfunktion schon genutzt aber nichts zu meiner Frage gefunden deshalb frage ich mal hier.

Auf der Seite herrscht folgendes Problem:

Die Seite ist responsive. Auf der kleinsten Auflösung ändert sich die Navigation zu einer mobilen Navigation. Ab dem Zeitpunkt greift ein Script welches die Navi auf Klick seitlich von rechts "reinschiebt".
Das Problem dabei ist, dass sie manchmal ziemlich verzögert reagiert (bis zu 5sek.).

Warum tut sie das und wie kann ich das verhindern?

(function($){
$.fn.swipe=function(options){
var is_nav_open = 0;
var defaults={
threshold:{x:30,y:10},
swipeLeft:function(){
jQuery('#wrapper').animate({ right: "0" }, 200 );
jQuery('#navigation_mobile').animate({ right: "-200px" }, 200 );
},
swipeRight:function(){
jQuery('#wrapper').animate({ right: "0" }, 200 ); 
jQuery('#navigation_mobile').animate({ right: "-200px" }, 200 );
}
};

var options=$.extend(defaults,options);

if(!this)return false;
return this.each(function(){
var me=$(this)
var originalCoord={x:0,y:0}
var finalCoord={x:0,y:0}
function touchStart(event){
originalCoord.x=event.targetTouches[0].pageX
originalCoord.y=event.targetTouches[0].pageY
}
function touchMove(event){
event.preventDefault();
finalCoord.x=event.targetTouches[0].pageX
finalCoord.y=event.targetTouches[0].pageY
}
function touchEnd(event){
var changeY=originalCoord.y- finalCoord.y
if(changeY<defaults.threshold.y&&changeY>(defaults.threshold.y*-1)){
changeX=originalCoord.x- finalCoord.x
if(changeX>defaults.threshold.x){defaults.swipeLeft()
}
if(changeX<(defaults.threshold.x*-1)){defaults.swipeRight()}
}
}
function touchStart(event){
originalCoord.x=event.targetTouches[0].pageX
originalCoord.y=event.targetTouches[0].pageY
finalCoord.x=originalCoord.x
finalCoord.y=originalCoord.y
}
function touchCancel(event){}
this.addEventListener("touchstart",touchStart,false);
this.addEventListener("touchmove",touchMove,false);
this.addEventListener("touchend",touchEnd,false);
this.addEventListener("touchcancel",touchCancel,false);
})
;}
;})(jQuery);

Bin Dankbar für jeden Tip!
Gruß Countii

 

[j-l-n]

Bitte entferne den Link und stelle einen auf den Fehler reduzierten Code zur Verfügung. Danke.

 

[Countii]

Hab ich geändert

 

[SteelWheel]

Ich rate mal ins Blaue, da der Quellcode sich so unformatiert doof liest:
- stop() benutzt Du bei animate() vorweg nicht, um eine noch laufende Animation wiederholt auf einem Element vorab zu stoppen, weil ...?!
- gefühlt habe ich den Eindruck, dass die Startposition Deines Sliders nicht der ist, den Du erwartest (aufgrund Resize) und sich Deine Animation von "weiter weg" erst da hinackern darf - lass Dir mal vor den Animationen die jeweilige Position (in px) in der Konsole zeigen

Was mir nicht einleuchtet: swipeLeft und -Right sind exakt identisch - da hätte ich was anderes erwartet.

Schön wäre noch zu sehen, ob #wrapper und #navigation_mobile ein Verwandtschaftsverhältnis (parent -> child) haben oder nur Nachbarn sind.

 

[tsseh]

gefühlt habe ich den Eindruck, dass die Startposition Deines Sliders nicht der ist, den Du erwartest (aufgrund Resize) und sich Deine Animation von "weiter weg" erst da hinackern darf - lass Dir mal vor den Animationen die jeweilige Position (in px) in der Konsole zeigen

bei der animation wird aber die zeit als feste größe vorgegeben, ist strecke länger, muß die geschwindigkeit steigen

 

[Countii]

Danke für die Tips, macht soweit schon mal viel Sinn.

Beim Suchen hab ich festgestellt, dass der Code nicht ganz der richtige war, hier also nochmal die Stelle, die meiner Meinung nach den Fehler enthält. Das Prinzip dürfte ja aber das selbe sein.

jQuery(document).ready(function() {
	//var divnav = $('#navigation');
	var is_nav_open = 0;
	jQuery('#navigation_mobile_button').click(function() {
		if(is_nav_open == 0) {
			jQuery('#wrapper').animate({
				right: "200px"
				}, 200 );
			jQuery('#navigation_mobile').animate({
				right: "0"
				}, 200 );
			is_nav_open = 1;
		}
		else if(is_nav_open == 1) {
			jQuery('#wrapper').animate({
				right: "0"
				}, 200 );
			jQuery('#navigation_mobile').animate({
				right: "-200px"
				}, 200 );
			is_nav_open = 0;
	   }
	});			
	window.onresize = function(event) {
		jQuery('#wrapper').animate({
			right: "0"
			}, 200 );
		jQuery('#navigation_mobile').animate({
			right: "-200px"
			}, 200 );
		is_nav_open = 0;
	}
});

Wäre da am Anfang einfach "jQuery('#wrapper').stop.animate" ausreichend?

Und Frage Nr.2: Hättet ihr einen Befehl parat, um in der Konsole die Position von einem Element ausgeben zu lassen?

LG, Countii

 

[j-l-n]

Hättet ihr einen Befehl parat, um in der Konsole die Position von einem Element ausgeben zu lassen?

Das geht folgendermaßen:

var element = document.getElementById("..."); //o.ä.
console.log(element + ": Abstand zum linken Rand: " + element.offsetLeft + " - Abstand zum oberen Rand: " + element.offsetTop);

 

[Countii]

Könntest du deinen Code selbst nochmal testen? So ganz funktioniert das nicht.
Bei mir kommt ein Fehler in Firebug:
TypeError: element is null

Und dann auch noch zurück zu meiner ersten Frage "Wäre da am Anfang einfach "jQuery('#wrapper').stop.animate" ausreichend?", darauf hatte ich noch keine Antwort.
Wäre nett wenn ich weitere Hilfe bekomme =D

Gruß Countii

 

[j-l-n]

Du musst natürlich auch das zu untersuchende Element korrekt definieren, beispielsweise mit der korrekten ID...

 

[kkapsner]

Und dann auch noch zurück zu meiner ersten Frage "Wäre da am Anfang einfach "jQuery('#wrapper').stop.animate" ausreichend?", darauf hatte ich noch keine Antwort.

Probier's doch aus...

Aber kannst du uns keinen Testlink geben, wo wir uns das live ansehen können?

 

[miniA4kuser]

Oder auch einfach mal die Dokumentation zu jQuery.stop() lesen. Dort sind auch Beispiele angegeben, die man kopieren kann und mit denen man dann experimentieren kann.

 

[Countii]

@Julian:
Dieser Fehler wird angezeigt.

TypeError: 
mobinavv is null
console.log(mobinavv + ": Abstand zum linken Rand: " + mobinavv.offsetLeft + " -...

Diesen Code habe ich verwendet.

var mobinavv = document.getElementById("#navigation_mobile"); 
console.log(mobinavv + ": Abstand zum linken Rand: " + mobinavv.offsetLeft + " - Abstand zum oberen Rand: " + mobinavv.offsetTop);

@kkapsner:
Danke scheint funktioniert zu haben.
Link kann ich nicht weitergeben.

 

[j-l-n]

Diesen Code habe ich verwendet.
var mobinavv = document.getElementById("#navigation_mobile");

ID's dürfen keine Raute enthalten - ich glaube aber eher, dass du hier etwas mit dem Zugriff auf Elemente mit einer ID in jQuery verwechselst...

 

[kkapsner]

Danke scheint funktioniert zu haben.

Dann ist's ja gut.