Matt Harris
2005-Sep-20 10:52 UTC
[Rails-spinoffs] script.aculo.us: pause before effect.appear
I''ve created a simple script (below) which calls the effect.appear script in order to make a group of items appear at the page load. I would like to have the images randomly appear at different times; e.g. the 3rd image might start appearing 2 seconds after load, the 6th image immediately after load, the first image 1 second after load, etc... How can I achieve this affect? --- example HTML and Javascript --- function img_appear() { var ndur=2, nstart=1, nend=22; for(var loop = nstart; loop < nend; loop++) { var nid=''a''+loop; new Effect.Appear(nid, {transition: Effect.Transitions.linear, duration: ndur}); } } <body onload="img_appear()"> <div class="images"> <img src="1.jpg" alt="" id="a1" /> <img src="2.jpg" alt="" id="a2" /> <img src="3.jpg" alt="" id="a3" /> <img src="4.jpg" alt="" id="a4" /> <img src="5.jpg" alt="" id="a5" /> <img src="6.jpg" alt="" id="a6" /> <img src="7.jpg" alt="" id="a7" /> <img src="8.jpg" alt="" id="a8" /> <img src="9.jpg" alt="" id="a9" /> <img src="10.jpg" alt="" id="a10" /> <img src="11.jpg" alt="" id="a11" /> <img src="1.jpg" alt="" id="a12" /> <img src="2.jpg" alt="" id="a13" /> <img src="3.jpg" alt="" id="a14" /> <img src="4.jpg" alt="" id="a15" /> <img src="5.jpg" alt="" id="a16" /> <img src="6.jpg" alt="" id="a17" /> <img src="7.jpg" alt="" id="a18" /> <img src="8.jpg" alt="" id="a19" /> <img src="9.jpg" alt="" id="a20" /> <img src="10.jpg" alt="" id="a21" /> </div> -------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20050920/29911561/attachment-0001.html
Thomas Fuchs
2005-Sep-20 11:22 UTC
[Rails-spinoffs] script.aculo.us: pause before effect.appear
use the current SVN trunk, there''s a "delay" option there, which waits for X seconds, then executes the effect. Thomas Am 20.09.2005 um 16:33 schrieb Matt Harris:> I''ve created a simple script (below) which calls the effect.appear > script in order to make a group of items appear at the page load. > I would like to have the images randomly appear at different times; > e.g. the 3rd image might start appearing 2 seconds after load, the > 6th image immediately after load, the first image 1 second after > load, etc... > > How can I achieve this affect? > > --- example HTML and Javascript --- > function img_appear() { > var ndur=2, nstart=1, nend=22; > for(var loop = nstart; loop < nend; loop++) > { > var nid=''a''+loop; > new Effect.Appear(nid, {transition: > Effect.Transitions.linear, duration: ndur}); > } > } > > <body onload="img_appear()"> > > <div class="images"> > <img src="1.jpg" alt="" id="a1" /> > <img src="2.jpg" alt="" id="a2" /> > <img src="3.jpg" alt="" id="a3" /> > <img src="4.jpg" alt="" id="a4" /> > <img src="5.jpg" alt="" id="a5" /> > <img src="6.jpg" alt="" id="a6" /> > <img src="7.jpg" alt="" id="a7" /> > <img src="8.jpg" alt="" id="a8" /> > <img src="9.jpg" alt="" id="a9" /> > <img src="10.jpg" alt="" id="a10" /> > <img src="11.jpg" alt="" id="a11" /> > <img src="1.jpg" alt="" id="a12" /> > <img src="2.jpg" alt="" id="a13" /> > <img src="3.jpg" alt="" id="a14" /> > <img src="4.jpg" alt="" id="a15" /> > <img src="5.jpg" alt="" id="a16" /> > <img src="6.jpg" alt="" id="a17" /> > <img src="7.jpg" alt="" id="a18" /> > <img src="8.jpg" alt="" id="a19" /> > <img src="9.jpg" alt="" id="a20" /> > <img src="10.jpg" alt="" id="a21" /> > </div> > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >
Matt Harris
2005-Sep-20 11:57 UTC
[Rails-spinoffs] script.aculo.us: pause before effect.appear
Thanks! I used this: --- function img_appear() { var num=4, ndur=1, nstart=1, nend=22, nfrom=0; for(var loop = nstart; loop < nend; loop++) { var nid=''a''+loop; new Effect.Appear(nid, {transition: Effect.Transitions.linear, delay:rand(4), duration:rand(2)}); } } function rand(n) { return Math.random()*n+1; } window.onload=img_appear; --- On 9/20/05, Hammed Malik <hammed@gmail.com> wrote:> > The following (untested) should display images randomly after 1-3 seconds. > > function img_appear() { > var ndur=2, nstart=1, nend=22; > for(var loop = nstart; loop < nend; loop++) > { > var nid=''a''+loop; > setTimeout(function() {new Effect.Appear(nid, {transition: > Effect.Transitions.linear, duration: ndur})}, rand(3)*1000; > } > } > > function rand ( n ) > { > return ( Math.floor ( Math.random ( ) * n + 1 ) ); > } > > > > On 9/20/05, Matt Harris < mhspam@gmail.com> wrote: > > > I''ve created a simple script (below) which calls the effect.appearscript in order to make a group of items appear at the page load. I would > > like to have the images randomly appear at different times; e.g. the 3rd > > image might start appearing 2 seconds after load, the 6th image immediately > > after load, the first image 1 second after load, etc... > > > > How can I achieve this affect? > > > > --- example HTML and Javascript --- > > function img_appear() { > > var ndur=2, nstart=1, nend=22; > > for(var loop = nstart; loop < nend; loop++) > > { > > var nid=''a''+loop; > > new Effect.Appear(nid, {transition: Effect.Transitions.linear, duration: > > ndur}); > > } > > } > > > > <body onload="img_appear()"> > > > > <div class="images"> > > <img src="1.jpg" alt="" id="a1" /> > > <img src="2.jpg" alt="" id="a2" /> > > <img src="3.jpg" alt="" id="a3" /> > > <img src="4.jpg" alt="" id="a4" /> > > <img src="5.jpg" alt="" id="a5" /> > > <img src="6.jpg" alt="" id="a6" /> > > <img src="7.jpg" alt="" id="a7" /> > > <img src="8.jpg" alt="" id="a8" /> > > <img src="9.jpg" alt="" id="a9" /> > > <img src="10.jpg" alt="" id="a10" /> > > <img src="11.jpg" alt="" id="a11" /> > > <img src="1.jpg" alt="" id="a12" /> > > <img src="2.jpg" alt="" id="a13" /> > > <img src="3.jpg" alt="" id="a14" /> > > <img src="4.jpg" alt="" id="a15" /> > > <img src="5.jpg" alt="" id="a16" /> > > <img src="6.jpg" alt="" id="a17" /> > > <img src="7.jpg" alt="" id="a18" /> > > <img src="8.jpg" alt="" id="a19" /> > > <img src="9.jpg" alt="" id="a20" /> > > <img src="10.jpg" alt="" id="a21" /> > > </div> > > > > > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs@lists.rubyonrails.org > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > > > > > > -- > Hammed Malik >-------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20050920/6ab33d34/attachment-0001.html