Create a Blind Down effect with AJAX.NET

January 12, 2008 18:36 by John M

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:

<div id="newsHolder" runat="server" class="newsHolder">
     <div id="newsContent" runat="server" style="display:none; margin: 10px 10px 10px 10px">
  
              whatever content you want in here. 
              
     </div>
</div>

<ajaxToolKit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="newsHolder">
        <Animations>
            <OnLoad>
                <Sequence>
                    <Resize Duration="1.0" Height="200" Unit="px" />
                    <StyleAction AnimationTarget="newsContent" Attribute="display" Value="block"></StyleAction>
                    <FadeIn AnimationTarget="newsContent" Duration="1.0"></FadeIn>
                </Sequence>
            </OnLoad>
        </Animations>
</ajaxToolKit:AnimationExtender>


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

.newsHolder
{
 height: 0px; 
 border: groove 2px silver;
 width: 95%;
 margin-left: 10px;
 margin-right: 10px;
}


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.

 


Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Related posts

Comments

July 18. 2008 11:29

Gravatar

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!

Mike French

July 22. 2008 14:36

Gravatar

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.

John_M

Add comment


(Will show your Gravatar icon)  

  Country flag




Live preview

November 21. 2008 05:46

Gravatar