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 ,

Comments

Mike French
7/18/2008 8:29:12 PM #
I know this is an old post but maybe this will be useful to you or the next person to stumble on it.

To get the Blind Down effect a little more simply, and to avoid the fade in at the end.  Do the following.

1. Add overflow:hidden; to the .newsHolder class.
2. Remove the StyleAction and FadeIn from the Animation Sequence.
3. Remove display:none; from newsContent.

Hope that's a little useful... Only tested in IE7.  

Thanks for the starting point!
John_M
7/22/2008 11:36:07 PM #
Cool Mike thanks for the tips!I'll see if I can get time to test this on other browsers as well and let people know.

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading