swapContainer - Funktion

Naja, dass der Container das tut was ich will: alle 5 Sekunden die Attributwerte verändern. Bitte nicht lachen, ich zeig euch jetzt mal wie ich die manuelle Steuerung gemacht habe. Das ist die Steuerung via Pfeilsymbol:

Code:
$(document).ready(function(){
		$('.left').click(function(){ 
			if (this.id == '1') {
    				$('#first').css('display', 'block');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '2') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'block');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '3') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'block');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '4') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'block');
				$('#fivth').css('display', 'none');
			} else if (this.id == '5') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'block');
			} else { }

			});	
		$('.right').click(function(){ 
			if (this.id == '1') {
				$('#first').css('display', 'block');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '2') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'block');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '3') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'block');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '4') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'block');
				$('#fivth').css('display', 'none');
			} else if (this.id == '5') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'block');
			} else { }

			});	
});

und hier im folgenden die Steuerung via Seitenzahl:

Code:
$(document).ready(function(){
                $('.slide_nav_screen_1').click(function(){
                        $('#first').css('display', 'block');
                        $('#second').css('display', 'none');
                        $('#third').css('display', 'none');
                        $('#fourth').css('display', 'none');
                        $('#fivth').css('display', 'none');
		});
                $('.slide_nav_screen_2').click(function(){
                        $('#first').css('display', 'none');
                        $('#second').css('display', 'block');
                        $('#third').css('display', 'none');
                        $('#fourth').css('display', 'none');
                        $('#fivth').css('display', 'none');
		});
                $('.slide_nav_screen_3').click(function(){
                        $('#first').css('display', 'none');
                        $('#second').css('display', 'none');
                        $('#third').css('display', 'block');
                        $('#fourth').css('display', 'none');
                        $('#fivth').css('display', 'none');
		});
                $('.slide_nav_screen_4').click(function(){
                        $('#first').css('display', 'none');
                        $('#second').css('display', 'none');
                        $('#third').css('display', 'none');
                        $('#fourth').css('display', 'block');
                        $('#fivth').css('display', 'none');
		});
                $('.slide_nav_screen_5').click(function(){
                        $('#first').css('display', 'none');
                        $('#second').css('display', 'none');
                        $('#third').css('display', 'none');
                        $('#fourth').css('display', 'none');
                        $('#fivth').css('display', 'block');
		});
});

Füge ich jetzt im Head Bereich den JS Code ein der hier vorgeschlagen wurde:

Code:
<script type="text/javascript" >
function swapContainer() {
  var elements = [
    $('#first'),
    $('#second'),
    $('#third'),
    $('#fourth'),
    $('#fivth')
  ];
  
  for(var pos = 0; pos < elements.length; ++pos) {
    if((elements[pos].css('display') == 'block') || ((pos == 0) && (elements[pos].css('display') == 'inline'))) {
      break;
    }
  }
  
  for(var i = 0; i < elements.length; ++i) {
    elements[i].css('display', 'none');
  }
  
  elements[pos].css('display', 'block');
}
$(document).ready(function(){
      setInterval('swapContainer()', 5000);
});
</script>

Dann tut sich rein gar nichts. Die manuelle Steuerung funktioniert, aber die Veränderung der Attributwerte sozusagen "zeitgesteuert" ist nicht sichtbar.
 
Naja, du sagst ja auch, dass er dem Element die Eigenschaft "display" auf "block" zu setzen, die bereits auf "block" gesetzt wurde. Da ändert sich logischerweise auch nichts.
 
OMG -.- siehst du, das kommt dabei raus. Ich sitze hier seit .. naja.. ich will mal behaupten seit geschlagenen 3 Stunden, starre darauf und checke nicht, dass ich einfach den falschen Elementen den Wert zugewiesen habe :/ :D dann will ich das mal ändern und schauen obs klappt ^^
 
Also die funktion funktioniert nun und ich habe es auch hinbekommen, dass er nach dem 5. Container wieder zum 1. springt:

Code:
function swapContainer() {
	var elements = [
		$('#first'),
		$('#second'),
		$('#third'),
		$('#fourth'),
		$('#fivth')
		];
  
	for(var pos = 0; pos < 5; ++pos) {
		if((elements[pos].css('display') == 'block') || ((pos == 0) && (elements[pos].css('display') == 'inline'))) {
			break;
			}
		}
  
	for(var i = 0; i < 5; ++i) {
		elements[i].css('display', 'none');
		}
	if(pos >= 4) {
		elements[0].fadeIn().css('display', 'block');
		var pos = 0;
		} else {
		elements[pos].next().fadeIn().css('display', 'block');
		}
	}

Allerdings ist mir eine seltsame Tatsache aufgefallen. Wenn ich das Fenster nicht im Vordergrund habe (und NUR dann) und es dann nach einer gewissen Zeit wieder öffne, dass werden alle Container auf einmal, untereinander dargestellt. Sprich - dann sind alle auf display: block. Und das seltsamerweise obwohl ich den umgebenden Container (also der, der alle Slidecontainer beinhaltet genau Dimensioniert habe und ihm ein overflow: hidden verpasst habe. Kannst du dir vorstellen woher das rührt?
 
Welche jQuery Version verwendest du? Version 1.5 und teilweise 1.6 verwendeten für Animationen (fadeIn) die requestAnimationFrame-Api. Der Browser bedient aber nur das Fenster/den Tab, der gerade im Fokus ist und hält alle anderen zurück. Deshalb kam es zu Darstellungsproblemen bei Animationen und es wurde wieder durch setTimeout/setIntervall ersetzt. Es werden also alle fadeIn Aufrufe erst ausgeführt, wenn du wieder zu dem Fenster wechselst.

Das ist aber nicht nur die Schuld von jQuery. Korrekterweise müsstest du deinen Code anders strukturieren.

Versuch es mal mit Version 1.6.3 oder größer.
 
Ja ich bin halt nunmal nicht so ein Genie :D Ich bin froh, dass ich diesen Code nachvollziehen kann. Aber ich denke das mit der Version ist ein guter Hinweis. Ich hatte Version 1.6.2 implementiert und jetzt auf 1.7.1 umgestellt. Ich werde es mal beobachten und schauen ob das noch öfter vorkommt - Ich berichte :)
 
Also nach mehrstündiger Beobachtung sieht es so aus, als ob das Versionupdate das jquery fadeOut Problem gelöst hat :) Danke
 
Zurück