Question

我正在尝试获取当前内容淡出的动画效果，然后替换为从屏幕右侧滑入的内容。我目前的努力：

<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);
      });
});

两个问题：

被移除的元素仍占用空间;注意页脚如何被压下来。
无论如何都要压制水平滚动条？

有关更好方法的任何提示都表示赞赏。谢谢！

Answer 1

垂直回滚的原因是因为jQuery UI实现了额外的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);
    });
});

Updated jsFiddle.

这是快速解决方法。另外一个步骤是将CSS外部化为类（您确实应该这样做而不是内联样式）以使事情变得更清晰：

<强> 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 { 高度：400像素; 背景色：蓝色; }

更好的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.

最后通过最大化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%;
}

更小的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');
    });
});

从开销角度来看，这是最好的，它是在现代网络世界中实现它的方式，但它不适用于IE9及以下版本。

Here's a jsFiddle for that one.

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

1 个答案: