The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Animate swap of divs layers

  • # November 6, 2012 at 10:35 am

    ON the USA Today web site, if you’re browser width is less than roughly 1280, the sidebar “Right Now” area is hidden. There’s a button that toggles and animates the Right Now content either on top or behind the main content column.

    Has anyone seen a jQuery plugin that does this or something fairly similar — swapping div order and animating that swap?

    Been searching for something, but have come up empty thus far. USA Today’s site is minified so it’s making it difficult to discern how they’re doing it.

    # November 6, 2012 at 10:48 am

    I would animate it to the right, change z-index and then animate it back to the left.
    $(‘.box’).animate({‘left’:500}, 500, function() {
    $(‘.box’).animate{‘left’:0}, 500

    # November 6, 2012 at 3:04 pm

    Yeah, I realized it was easier than I was making it out to be:
    //Swaps focus between US and UK versions
    $(“#europeBtn”).click(function() {
    “left”: “681px”
    }, 750, “easeInOutQuad”, function() {
    “left”: “10px”
    }, 750, “easeInOutQuad”);

    The topContent class just has a higher z-index.

    # November 7, 2012 at 4:19 am

    perfect :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed