How to slide content opening up with jquery


Tags: jquery,css,animation

Problem :

My designer handed me a design I'm not 100% sure how to do with jquery and css. I am basicly trying to allow a user to "slide" the footer up to reveal more conent.

My html..

 <div id="footer">
     <div id="expandingFooter"> hidden content</div>
        content that is always visible
 </div>

I have a toggle button that onclick

$('#expandingFooter').slideToggle();

This slides the expanding footer content open downward, then slides back up to close. I would like it to slide up and then close down.

Thanks



Solution :

You can leverage JQuery UI 1.6's Effects (Effects Demo Page). The following accomplished the desired effect for me.

$('#toggleButton').bind('click', function(e) {
    $('#expandingFooter').toggle(
        'slide', 
        { easing: 'easeOutQuint', direction: 'down' }, 
        1000
    );
});

Note: You may want to play with the easing parameter to get the desired smoothness of the effect.

You'll need to have the latest versions of both JQuery and JQuery UI Slide Effect to do this.


    CSS Howto..

    What is cufon and canvas and how to overwrite them

    How can I make uneven rows for a 2-column grid with Bootstrap/css?

    How do I make elements flow horizontally instead of vertically?

    How to hide div on swipe in Angular

    How do I make XAMPP use the paths from my Wordpress themes folder?

    How to use CSS to create a dynamic corner frame?

    How to scroll the fixed content in CSS and HTML

    How can I increase the size of twitter bootstrap carousel navigation arrows

    show button instead of menu bar when browser resize in css/html [closed]

    How to properly separate pages in jQuery Mobile?

    how to include absolute css path using add_editor_style() in wordpress

    How to center a child element in CSS, even if it is larger than the parent?

    How To Turn JS Objects To HTML And Style With CSS

    How to Auto set the height of a div using the height of another div

    how is the search mail button implemented?

    How to create new line with css or javascript?

    Hover on “everything but” aka “spotlight” effect: how to make smooth & easy hover transitions?

    Normalized CSS, option in JSFiddle, how to add it to document

    CSS menu list items need to show inside div container

    How to say that you need to turn your mobile phone in javascript/css? [closed]

    How to equal height of