1

I am trying to get an animation effect where current content fades out, and is then replaced by content sliding in from the right side of the screen. My current effort:

http://jsfiddle.net/LKazq/3/

<p>header</p>
<div id="wrapper">
    <div style="height: 400px; background-color: red;">
        <p>Here is some text!</p>
        <button id="next">And a button!</button>
    </div>
</div>
<p>footer</p>

$('#next').click(function () {
    var current = $('#wrapper :first-child');
      var next = $('<div>').css("height", "400px").css("background-color", "blue");
      next.hide();

      current.fadeOut(800, function () {
        current.remove();
        $('#wrapper').prepend(next);
        next.show("slide", { direction: "right" }, 800);
      });
});

Two problems:

  • The removed element is still taking up space; notice how the footer gets pushed down.
  • Is there anyway to suppress the horizontal scroll bar?

Any tips on better ways to do this are appreciated. Thanks!

1 Answer 1

3

The reason for the vertical scroll back is because of an additional UI wrapper that jQuery UI puts in place.

You can do this with regular jQuery and it should be just fine:

$('#next').on('click',function(){
    var wrapper = $('#wrapper'),
        current = wrapper.children().first(),
        next = $('<div>').css({
            height:400,
            backgroundColor:'blue',
            marginLeft:'100%',
            display:'none'
        });

    current.fadeOut(800, function () {
        $(this).remove();
        wrapper.prepend(next);
        next.show().animate({marginLeft:0},800);
    });
});

Updated jsFiddle.

That's the quick-fix way to do it. An additional step is to externalize your CSS into classes (which you really, really should do instead of inline styles) to make things a bit cleaner:

HTML:

<p>header</p>
<div id="wrapper">
    <div class="first">
        <p>Here is some text!</p>
        <button id="next">And a button!</button>
    </div>
</div>
<p>footer</p>

CSS:

wrapper {
    overflow:auto;
    overflow-x:hidden;
}

.first {
    height:400px;
    background-color:red;
}

.second { height:400px; background-color:blue; }

Better jQuery:

$('#next').on('click',function(){
    var wrapper = $('#wrapper'),
        current = wrapper.children().first(),
        next = $('<div>').addClass('second').css({
            marginLeft:'100%',
            display:'none'
        });

    current.fadeOut(800, function () {
        $(this).remove();
        wrapper.prepend(next);
        next.show().animate({marginLeft:0},800,function(){
            $(this).removeAttr('style');   
        });
    });
});

Here is a second jsFiddle for that.

And finally the best (although not ancient-browser compliant) way to do it, by maximizing CSS.

CSS:

#wrapper {
    overflow:auto;
    overflow-x:hidden;
}

.first {
    height:400px;
    background-color:red;
}

.second {
    height:400px;
    background-color:blue;
    margin-left:0;

    -webkit-transition:margin-left 800ms;
    -moz-transition:margin-left 800ms;
    -o-transition:margin-left 800ms;
    transition:margin-left 800ms;
}

.secondPushed {
    margin-left:100%;
}

Smaller jQuery:

$('#next').on('click',function(){
    var wrapper = $('#wrapper'),
        current = wrapper.children().first(),
        next = $('<div>').addClass('second secondPushed').hide();

    current.fadeOut(800, function () {
        $(this).remove();
        wrapper.prepend(next);
        next.show().removeClass('secondPushed');
    });
});

This is the best from an overhead perspective, and its the way to do it in the modern web world, but it doesn't work on IE9 and below.

Here's a jsFiddle for that one.

1
  • Work great, thanks! Agree on the external CSS; the code above was just for minimal demo. And unfortunately, I have to support IE8 (ugh.), so modern CSS is not an option. Commented Dec 9, 2013 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.