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.
3/13/2010 1:02:19 AM #
Stumbled into this site by chance but I’m sure glad I clicked on that link. You definitely answered all the questions I’ve been dying to answer for some time now.  Will definitely come back for more of this. Thank you so much

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading