Create a Blind Down effect with AJAX.NET

13. January 2008

I was expirementing with a new website design for our company and I wanted to include some type of animation effect on the home page.  I started off with scriptaculous and found out it was a bit difficult to get going using master pages.  This was because of how the order of the content was getting loaded.  So instead I tried using the Animation Extender in the AJAX toolkit...which I don't use too often.  The goal was to mimic the Blind Down Effect in scriptaculous.  I got pretty close, but not exactly like it would be using scriptaculous.  I had it working in IE, but Firefox processed the DIV's differently, so I came up with another solution.  Basically, I use the following concept:

Start the DIV at height 0px
Resize the DIV to height 200px (this could be whatever works for you)
Fade In the DIV

Below is the code that I used to accomplish this:

 


NOTE: the "newsHolder" class consists of the following:


If anyone can find a Blind Effect similiar to scriptaculous using the AJAX.NET framework that works proper in both IE and Firefox please response to this post.  I would be interested in knowing how this is accomplished.

 

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

AJAX.NET ,

blog comments powered by Disqus