Javascript 为HTML内容创建淡出和滑入动画

我试图得到一个动画效果，当前内容淡出，然后被从屏幕右侧滑入的内容取代。我目前的努力：

标题

这里有一些文字

还有一个按钮！
页脚

$（“#下一步”）。单击（函数（）{
var current=$（“#包装器：第一个子项”）；
var next=$（''）.css（“高度”，“400px”）.css（“背景色”，“蓝色”）；
next.hide（）；
电流衰减（800，功能（）{
current.remove（）；
$（“#包装器”）.prepend（下一个）；
接下来，show（“幻灯片”{direction:“right”}，800）；
});
});

两个问题：

• 被移除的元素仍在占用空间；注意页脚是如何向下推的
• 是否仍有方法抑制水平滚动条

---

任何关于更好方法的建议都将不胜感激。谢谢

垂直向后滚动的原因是jQueryUI放置了一个额外的UI包装器

您可以使用常规jQuery执行此操作，它应该很好：

$('#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);
    });
});

.第二{ 高度：400px； 背景颜色：蓝色； }

更好的jQuery:

<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>

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

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

$('#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');   
        });
    });
});

#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%;
}

$('#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');
    });
});

较小的jQuery:

<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>

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

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

$('#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');   
        });
    });
});

#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%;
}

$('#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');
    });
});

$（'#next'）。在（'click'，function（）上{
var wrapper=$（“#wrapper”），
current=wrapper.children（）.first（），
next=$（''）.addClass（'second secondPushed'）.hide（）；
电流衰减（800，功能（）{
$（this.remove（）；
wrapper.prepend（下一个）；
next.show（）.removeClass（'secondPushed'）；
});
});

从开销的角度来看，这是最好的，在现代网络世界中也是这样，但在IE9及以下版本中不起作用

---

干得好，谢谢！就外部CSS达成一致意见；上面的代码只是为了演示一下。不幸的是，我必须支持IE8，所以现代CSS不是一个选项。