Dave Mateer
Dave Mateer

Reputation: 17956

Create fade-out and slide-in animation for HTML content

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:

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

Upvotes: 1

Views: 1324

Answers (1)

PlantTheIdea
PlantTheIdea

Reputation: 16369

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.

Upvotes: 3

Related Questions