✔ jQuery will nicht zusammen funktionieren!?

[arraybreak]

Abend zusammen,

ich habe eine Animation mittels jQuery gebastelt und das will zusammen nicht funktionieren,

habe 2 Punkte,
der erste blendet die Bilder nach und nach ein: hier der Code

$(window).load(function() {	
  $('.top-demo img').hide();
			});
			
  $(window).bind('load', function() {
	   var i = 1;
	   var imgs = jQuery('.top-demo img').length;
	   var int = setInterval(function() {
		   //console.log(i); check to make sure interval properly stops
		   if(i >= imgs) clearInterval(int);
		   jQuery('.top-demo img:hidden').eq(0).fadeIn(500);
		   i++;
	   }, 500);
});

Der zweite verschiebt und skaliert die Bilder gleichzeitig:

$(document).ready(function() { 
	$("#mt1").animate({ pause: 500}, 4000).animate({left:"-135px", top:"430px", width:"115px"}, 800);
	$("#mt2").animate({ pause: 500}, 4000).animate({left:"-135px", top:"430px", width:"115px"}, 800);
	$("#mt3").animate({ pause: 500}, 4000).animate({left:"-135px", top:"520px", width:"115px"}, 800);
	$("#mt4").animate({ pause: 500}, 4000).animate({left:"-135px", top:"540px", width:"115px"}, 800);  
});

Also wenn ich eins von beiden aussetzte funktioniert der andere, aber sie funktionieren nicht gleichzeitig, das heißt er blendet mir die Bilder am Anfang nicht nach und nach ein

 

[ComFreek]

Wieso versuchst du gleich 3-mal eine Funktion an das window.onload-Ereignis zu binden?

Versuche mal folgendes:

$(function () {
  $('.top-demo img').hide();
  
  // Kleine Anmerkung: ich würde entweder $ oder jQuery benutzen, aber nicht beides
  var i = 1;
  var imgs = jQuery('.top-demo img').length;
  var int = setInterval(function() {
  //console.log(i); check to make sure interval properly stops
  if(i >= imgs) clearInterval(int);
    jQuery('.top-demo img:hidden').eq(0).fadeIn(500);
    i++;
  }, 500);

  $("#mt1").animate({ pause: 500}, 4000).animate({left:"-135px", top:"430px", width:"115px"}, 800);
  $("#mt2").animate({ pause: 500}, 4000).animate({left:"-135px", top:"430px", width:"115px"}, 800);   $("#mt3").animate({ pause: 500}, 4000).animate({left:"-135px", top:"520px", width:"115px"}, 800);
  $("#mt4").animate({ pause: 500}, 4000).animate({left:"-135px", top:"540px", width:"115px"}, 800);

  // Den letzten Block könnte man auch nocht verkürzen:
  /*
    $("#mt1, #mt2, #mt3, #mt4").animate({pause: 500}, 4000).animate({left: "-135px", top: "430px", width: "115px"}, 800);
  */
});

 

[arraybreak]

Danke für dein Vorschlag, funktioniert aber leider auch nicht, das gleiche Problem wie bisher.

Und den letzten Block kann ich leider nicht verkürzen da die Bilder unterschiedlichen Abstand von oben haben müssen.

Hier noch mein HTML Code, falls es weiter hilft:

 <div class="top-demo" style="display:none">
		<img id="mt1" class="myimg" src="images/mt-1.png"/>
    		<img id="mt2" class="myimg" src="images/mt-2.png"/>
    		<img id="mt3" class="myimg" src="images/mt-3.png"/>
    		<img id="mt4" class="myimg" src="images/mt-4.png"/>
 </div>

 

[arraybreak]

Jetzt funktioniert alles, lag an CSS (position:absolute hat die Probleme verursacht)