jnf555 Posted May 27, 2011 Share Posted May 27, 2011 hi can anyone tell me how to make my start button a start/stop button, or with two seperate buttons.<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){ $("#1").animate({left:"170px",top:"100px"},500); $("#1").animate({height:"510px",width:"500px"},5000); $("#1").animate({left:"0px",top:"100px",width:"160px",height:"120px"},500, function(){ $("#2").animate({left:"170px",top:"100px"},500); $("#2").animate({height:"510px",width:"500px"},5000); $("#2").animate({left:"0px",top:"230px",width:"160px",height:"120px"},500, function(){ $("#3").animate({left:"170px",top:"100px"},500); $("#3").animate({height:"510px",width:"500px"},5000); $("#3").animate({left:"0px",top:"360px",width:"160px",height:"120px"},500, function(){ $("#4").animate({left:"170px",top:"100px"},500); $("#4").animate({height:"510px",width:"500px"},5000); $("#4").animate({left:"0px",top:"490px",width:"160px",height:"120px"},500, function(){ $("#5").animate({left:"170px",top:"100px"},500); $("#5").animate({height:"510px",width:"500px"},5000); $("#5").animate({left:"0px",top:"620px",width:"160px",height:"120px"},500, function(){ $("#6").animate({left:"170px",top:"100px"},500); $("#6").animate({height:"510px",width:"500px"},5000); $("#6").animate({left:"170px",top:"620px",width:"160px",height:"120px"},500, function(){ $("#7").animate({left:"170px",top:"100px"},500); $("#7").animate({height:"510px",width:"500px"},5000); $("#7").animate({left:"340px",top:"620px",width:"160px",height:"120px"},500, function(){ $("#8").animate({left:"170px",top:"100px"},500); $("#8").animate({height:"510px",width:"500px"},5000); $("#8").animate({left:"510px",top:"620px",width:"160px",height:"120px"},500, function(){ $("#9").animate({left:"170px",top:"100px"},500); $("#9").animate({height:"510px",width:"500px"},5000); $("#9").animate({left:"680px",top:"620px",width:"160px",height:"120px"},500, function(){ $("#10").animate({left:"170px",top:"100px"},500); $("#10").animate({height:"510px",width:"500px"},5000); $("#10").animate({left:"680px",top:"490px",width:"160px",height:"120px"},500, function(){ $("#11").animate({left:"170px",top:"100px"},500); $("#11").animate({height:"510px",width:"500px"},5000); $("#11").animate({left:"680px",top:"360px",width:"160px",height:"120px"},500, function(){ $("#12").animate({left:"170px",top:"100px"},500); $("#12").animate({height:"510px",width:"500px"},5000); $("#12").animate({left:"680px",top:"230px",width:"160px",height:"120px"},500, function(){ $("#13").animate({left:"170px",top:"100px"},500); $("#13").animate({height:"510px",width:"500px"},5000); $("#13").animate({left:"680px",top:"100px",width:"160px",height:"120px"},500)}); }); }); }); }); }); }); }); }); }); }); }); });});</script><style>body{background-color:black}#container{width:900px;height:900px;margin:auto;position:relative;}.thumbnail{position:absolute;background:yellow;height:120px;width:160px;}</style></head><body><div id="container"><div id="1" class="thumbnail"style="left:0px;top:100">1</div><div id="2" class="thumbnail"style="left:0px;top:230px;">2</div><div id="3" class="thumbnail"style="left:0px;top:360px">3</div><div id="4" class="thumbnail"style="left:0px;top:490px">4</div><div id="5" class="thumbnail"style="left:0px;top:620px">5</div><div id="6" class="thumbnail"style="left:170px;top:620px">6</div><div id="7" class="thumbnail"style="left:340px;top:620px">7</div><div id="8" class="thumbnail"style="left:510px;top:620px">8</div><div id="9" class="thumbnail"style="left:680px;top:620px">9</div><div id="10" class="thumbnail"style="left:680px;top:490px">10</div><div id="11" class="thumbnail"style="left:680px;top:360px">11</div><div id="12" class="thumbnail"style="left:680px;top:230px">12</div><div id="13" class="thumbnail"style="left:680px;top:100px">13</div><button>start slideshow</button></div></body></html>thanks jnf555 Link to comment Share on other sites More sharing options...
MrFish Posted May 27, 2011 Share Posted May 27, 2011 You can use JQuery's .stop() for this.http://api.jquery.com/stop/Edit:If you want to make the play button a start/stop button then toggle an attribute when you click it. $("button").click(function(){ val = $(this).attr("do"); if(val != "pause") { $(this).attr("do", "pause"); //animation stuff } else { $(this).attr("do", "play"); //It doesn't matter what you put here //since you don't check for play. But might as well //Pause stuff }}); Link to comment Share on other sites More sharing options...
ShadowMage Posted May 27, 2011 Share Posted May 27, 2011 I think MrFish is got it. The only other thing I'll add is that you probably want to pass true to the stop function as the first argument:$("button").stop(true);If I am understanding the functionality correctly, the stop function only stops the current animation on the queue and continues on to the next one. I think you want to halt all animations instead of just stopping the current one. Passing true will stop all animations. Link to comment Share on other sites More sharing options...
jnf555 Posted May 27, 2011 Author Share Posted May 27, 2011 thank you both for replies, yes i do want to stop all animations.thanksjnf555 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.