Code explanation:
Perhaps you are getting some whiff of what I am talking.
This language javascript is an amazing thing.
It allows not only creative thinking and several animations, it also
forces you to
do the right thing.
Otherwise you will not get the result you want.
Are you confused what is javascript and what is jQuery?
That is fine. I also went thro' the same.
Now, the initial bottleneck I had in this code was the CSS.
How to align the images next to each other?
After I cracked it with the float attribute and few other CSS techniques my next
challenge was to make the images slide up and disappear one by one.
As you can see, there is an automatic sequencing enforced by HTML DOM when you
place the elements on the page.
And jquery each() function will help you iterate through them using
the class selector.
I used the class 'vanish' I selected using '.vanish' and I also
selected the images which is a
child of vanish div.
$('.vanish img').each()
will iterate through each of the image elements one by one.
Then I stored them in a javascroipt array arr and I used the slideUp()
callback and recursion to
go through them one by one.
If you don't understand the last sentence that is okay.
One thing at a time.
-Girish
On Sat, Jun 22, 2013 at 9:19 AM, Girish Venkatachalam
<[email protected]> wrote:
> You can see javascript recursion.
>
> You can also guess why I am using it if you think a little(async).
>
> And this is a nice effect.
>
> http://awrdev.g3tech.in/vanishimage.html
>
> Code:
>
> function onebyone(el) {
> el.slideUp(6000, function() {
> el = arr.shift();
> if(el == null) {
> return;
> } else {
> onebyone(el);
> }
> });
>
> }
> var arr = [ ];
> $(function() {
> $('.vanish img').each(function() {
> arr.push($(this));
> });
> onebyone(arr.shift());
> })
>
> -Girish
>
> --
> Gayatri Hitech
> http://gayatri-hitech.com
--
Gayatri Hitech
http://gayatri-hitech.com
_______________________________________________
ILUGC Mailing List:
http://www.ae.iitm.ac.in/mailman/listinfo/ilugc
ILUGC Mailing List Guidelines:
http://ilugc.in/mailinglist-guidelines
