Jump to content

jquery


jnf555
 Share

Recommended Posts

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

Edited by jnf555
Link to comment
Share on other sites

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...