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