Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Animate swap of divs layers

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #40645
    rkeefer
    Member

    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.

    #113494
    JoniGiuro
    Participant

    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

    #113516
    rkeefer
    Member

    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.

    #113549
    JoniGiuro
    Participant

    perfect :)

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.