Question

我正在尝试一个简单的jquery动画。它是一种只有2个容器的老虎机。

我要创建的是单击按钮时（容器A在屏幕上，静态）：容器A向上滑入屏幕，容器B紧随其后。然后，当动画完成时。我想重置容器A的位置。

我目前的设置如下：

CSS：

.containerA { position: fixed; top: 0; width:200px; height: 100vh; }
.containerB { position: fixed; top: 100vh; width: 200px; height: 100vh; }

jQuery：

$("#containerBtrigger").click(function(){
// set z-index first so you wont see container A resetting position.
  $(".containerB").css("z-index", "20");
  $(".containerA").css("z-index", "0");

//have container B slide upwards into the screen
$(".containerB").animate({
  top : "0",}, 500);

//container A slides upwards, out of the screen, when its animation is done, it should set the position to 100vh, out of the viewport.
$('.containerA').animate({
  top: '-100vh'
  }, 500, function () {
     $(this).css({ top : '100vh' }); });
});

但是，每当我单击触发按钮时，应从屏幕上滑出的容器就会向下滑动，而另一个应按预期向上滑动。

我也尝试过将animate的回调函数替换为：

function () { $(this).removeAttr('style');

但是这也没有任何作用。

我对jQuery仍然很不好，几个月都没碰过。可能有一种更好的方法来进行这种老虎机设置，但在这一点上我绝对一无所知。

编辑：我刚刚看到它向上移动了3像素，然后向下滑动了

Answer 1

jQuery对我来说看起来还不错，但是由于我看不到您如何构造HTML，因此无法说，这很重要。始终尽力在您提供的所有相关代码中进行检查。

如果元素是同级元素，则不必真正担心z-index。将它们以相同的速度向上滚动，然后最后检查框是否在框架（或窗口）上方，如果是，则将其重置为css，使其位于下方。 jQuery的.css()函数是即时的，因此您的用户不会看到它回到底部。

JS FIDDLE

<style>
    .frame { 
        height: 200px; 
        width: 200px;
        border: 5px solid gray; 
        margin: 20px; 
        position: relative; 
        background-color: pink; 
        float: left; 
        overflow: hidden; /* uncomment to see full action */
    }
    .frame > div {
        position: absolute;
        display: block;
        left: 0; 
        height: 200px; 
        width: 200px; 
    }
    .box_a {
        top: 0; 
        background-color: red; 
    }
    .box_b {
        top: 200px; 
        background-color: blue; 
    }
    #scroll { 
        float: left;
        margin: 20px 0 0 50px; 
    }
</style>

<div class="frame">
    <div class="box_a"></div>
    <div class="box_b"></div>
</div>
<button id="scroll" type="button">Scroll</button>

<script>
// when called, collect all boxes
// use current "top" value to calculate new "top" value
// animate it, then check new "top" to see if it's above the frame
// if so, instantly reset it to the bottom. 
const scroll_all_boxes = function() {
    $('.box_a, .box_b').each(function(index, box) {
        const old_top = parseInt($(box).css('top')); // example: '200px' => 200
        const new_top = old_top - 200 + 'px';  // example: "-200px"

        $(box).animate({
            top: new_top
        }, 500, function() {
            // after animation, if box is at above frame
            // reset css so it's at bottom, instantly 
            const postAnimationTop = parseInt($(box).css('top')); // '200px' => 200
            if (postAnimationTop !== 0) {
                $(box).css({
                    top: '200px'
                });
            }
        });
    });
}

$('#scroll').click(scroll_all_boxes);
</script>

上面的脚本不是复制/粘贴解决方案，而是一个非常简单的示例。问我是否需要的问题，但会尽力进行检查，然后将其应用于您自己的情况。那是最好的学习方式。祝好运！

jQuery动画回调触发很快

1 个答案: