jnf555 Posted May 29, 2011 Share Posted May 29, 2011 hi can anyone tell me why it dosent show imges one after the other, i have probably missed something.<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click( function(){ $("#1,#1 img").animate({left:"170px",top:"100px"},500); $("#1,#1 img").animate({height:"300px",width:"420px"},5000); $("#1,#1 img").animate({left:"0px",top:"30px",width:"140px",height:"100px"},500, function(){ $("#2,#2 img").animate({left:"170px",top:"100px"},500); $("#2,#2 img").animate({height:"300px",width:"420px"},5000); $("#2,#2 img").animate({left:"0px",top:"135px",width:"140px",height:"100px"},500, function(){ $("#3,#3 img").animate({left:"170px",top:"100px"},500); $("#3,#3 img").animate({height:"300px",width:"420px"},5000); $("#3,#3 img").animate({left:"0px",top:"240px",width:"140px",height:"100px"},500, function(){ $("#4,#4 img").animate({left:"170px",top:"100px"},500); $("#4,#4 img").animate({height:"300px",width:"420px"},5000); $("#4,#4 img").animate({left:"0px",top:"345px",width:"140px",height:"100px"},500, function(){ $("#5,#5 img").animate({left:"170px",top:"100px"},500); $("#5,#5 img").animate({height:"300px",width:"420px"},5000); $("#5,#5 img").animate({left:"0px",top:"450px",width:"140px",height:"100px"},500, function(){ $("#6,#6 img").animate({left:"170px",top:"100px"},500); $("#6,#6 img").animate({height:"300px",width:"420px"},5000); $("#6,#6 img").animate({left:"145px",top:"450px",width:"140px",height:"100px"},500, function(){ $("#7,#7 img").animate({left:"170px",top:"100px"},500); $("#7,#7 img").animate({height:"300px",width:"420px"},5000); $("#7,#7 img").animate({left:"290px",top:"450px",width:"140px",height:"100px"},500, function(){ $("#8,#8 img").animate({left:"170px",top:"100px"},500); $("#8,#8 img").animate({height:"300px",width:"420px"},5000); $("#8,#8 img").animate({left:"435px",top:"450px",width:"140px",height:"100px"},500, function(){ $("#9,#9 img").animate({left:"170px",top:"100px"},500); $("#9,#9 img").animate({height:"300px",width:"420px"},5000); $("#9,#9 img").animate({left:"450px",top:"450px",width:"140px",height:"100px"},500, function(){ $("#10,#10 img").animate({left:"170px",top:"100px"},500); $("#10,#10 img").animate({height:"300px",width:"420px"},5000); $("#10,#10 img").animate({left:"450px",top:"345px",width:"140px",height:"100px"},500, function(){ $("#11,#11 img").animate({left:"170px",top:"100px"},500); $("#11,#11 img").animate({height:"300px",width:"420px"},5000); $("#11,#11 img").animate({left:"450px",top:"240px",width:"140px",height:"100px"},500, function(){ $("#12,#12 img").animate({left:"170px",top:"100px"},500); $("#12,#12 img").animate({height:"300px",width:"420px"},5000); $("#12,#12 img").animate({left:"450px",top:"135px",width:"140px",height:"100px"},500, function(){ $("#13,#13 img").animate({left:"170px",top:"100px"},500); $("#13,#13 img").animate({height:"300px",width:"420px"},5000); $("#13,#13 img").animate({left:"450px",top:"30px",width:"140px",height:"100px"},500)}); });});}); });});}); });});}); });});});});</script><style>body{background-color:black}#container{width:900px;height:900px;margin:auto;position:relative;}.thumbnail{position:absolute;border:1px solid white;width:140px;height:100px;}</style></head><body><div id="container"><div id="1" class="thumbnail"style="left:0px;top:30"><img src="testpic2.gif" alt"" width="140" height="100"></div><div id="2" class="thumbnail"style="left:0px;top:135"><img src="testpic.gif" alt"" width="140" height="100"></div><div id="3" class="thumbnail"style="left:0px;top:240"><img src="testpic2.gif" alt"" width="140" height="100"></div><div id="4" class="thumbnail"style="left:0px;top:345"><img src="testpic.gif" alt"" width="140" height="100"></div><div id="5" class="thumbnail"style="left:0px;top:450"><img src="testpic2.gif" alt"" width="140" height="100"></div><div id="6" class="thumbnail"style="left:145px;top:450"><img src="testpic.gif" alt"" width="140" height="100"></div><div id="7" class="thumbnail"style="left:290px;top:450"><img src="testpic2.gif" alt"" width="140" height="100"></div><div id="8" class="thumbnail"style="left:435px;top:450"><img src="testpic.gif" alt"" width="140" height="100"></div><div id="9" class="thumbnail"style="left:580px;top:450"><img src="testpic2.gif" alt"" width="140" height="100"></div><div id="10" class="thumbnail"style="left:580px;top:345"><img src="testpic.gif" alt"" width="140" height="100"></div><div id="11" class="thumbnail"style="left:580px;top:240"><img src="testpic2.gif" alt"" width="140" height="100"></div><div id="12" class="thumbnail"style="left:580px;top:135"><img src="testpic.gif" alt"" width="140" height="100"></div><div id="13" class="thumbnail"style="left:580px;top:30"><img src="testpic2.gif" alt"" width="140" height="100"></div><button>start slideshow</button></div></body></html>jnf555 Link to comment Share on other sites More sharing options...
Fmdpa Posted June 1, 2011 Share Posted June 1, 2011 I'm not sure if this is illegal in HTML, but the first thing I noticed was that you didn't have a space between class="thumbnail" and the subsequent "style" attribute. HTML: <div id="1" class="thumbnail"style="left:0px;top:30">...</div> => <div id="1" class="thumbnail" style="left:0px;top:30">...</div> Also, your JS code is very repetitive and hard to read (even when indented). Wouldn't it be easier to select all of the .thumbnail elements and then loop through the nodelist, animating each element as it is iterated over? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.