JS-initiated CSS3 Animations with jQuery Fallback

Posted on 2012-08-20
Last Modified: 2012-09-03
Hi Experts!

I need some help with CSS3 animations.  I want to create a simple slideUp/Down animation as per jquery's .slideUp() and slideDown() methods.

Its for a mobile accordion widget.

I know how to create the JQ fallback, and to handle the rest of the accordion, what I need a hand with is:

1) How to setup the CSS3 animation for sliding an element into / out of view
2) How to initiate this from javascript.

Is it a simple case of assigning a class that has the transition CSS set on it?

Im not very familiar with CSS3 animations..


Question by:Barry Jones
    LVL 19

    Accepted Solution

    Here you have a good tutorial on CSS3 animation.

    I hope it helps you:
    LVL 12

    Author Comment

    by:Barry Jones
    Hi Bardobrave

    Thanks for your post - I've just gone on a weeks holiday, and will get back to this in 1 week ok?

    Thanks, TheFoot
    LVL 19

    Expert Comment

    That's fine. Enjoy your vacation time!
    LVL 12

    Author Closing Comment

    by:Barry Jones
    Sorry for the delay - thanks for the link - perfect!

    Cheers, TheFoot

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Hire Freelancers to Complete JavaScript Projects

    Source the talented Expert Exchange community
    for top quality work on your JavaScript projects.

    Hire the best. Collaborate easily. Get quality work.

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now