Grow your CSS skills. Land your dream job.

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() {
    $(this).css(‘z-index’,100)
    });
    $(‘.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() {
    $(“#UKContent”).animate({
    “left”: “681px”
    }, 750, “easeInOutQuad”, function() {
    $(“#UKContent”).addClass(‘topContent’);
    $(“#USContent”).removeClass(‘topContent’);
    $(“#UKContent”).animate({
    “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.

*May or may not contain any actual "CSS" or "Tricks".