Question

$("#about").click(function (e) {
    e.preventDefault();
    $('nav').animate({
        'left': '-10.5em'
    }, 200, 'easeInOutQuad');
    $('#underwater').css('background', 'rgb(16, 66, 89)');
    if ($('#underwater').css('opacity') == 1) {
        $("#waves_1").data('dir', true).css('backgroundPosition', '0px 0px');
        $("#waves_2").data('dir', false).css('backgroundPosition', '0px 0px');
        $("#underwater").css('height', win.height()).animate({
            'height': 0 + 20
        }, 300, 'easeInOutQuad')
        $("#waves_1, #waves_2").stop().animate({
            'bottom': 0
        }, 300, 'easeInOutQuad');
        $("#underwater").animate({
            'opacity': 0
        }, 100, 'easeInOutQuad');
        setTimeout(function () {
            $(".pg-content").hide();
        }, 1000);
        tide(); //  get the waves moving
        tide2();
        setTimeout(function () {
            q_about();
        }, 1000);
    } else {
        $("#waves_1, #waves_2").stop().animate({
            'bottom': win.height()
        }, 3000, 'easeInOutQuad');
        $("#underwater").css('height', 0).css('opacity', 1).show().animate({
            'height': win.height() + 20
        }, 3000, 'easeInOutQuad')
        $("#q_about").show();
        setTimeout(function () {
            nav_out();
        }, 3100);
    }
});

.pg-content位于#underwater

下

#about点击

中调用的函数

function q_about() {
    $("#waves_1, #waves_2").stop().animate({
        'bottom': win.height()
    }, 750, 'easeInOutQuad');
    $("#underwater").css('height', 0).css('opacity', 1).show().animate({
        'height': win.height() + 20
    }, 750, 'easeInOutQuad');
    $("#q_about").show();
    $('nav').animate({
        'left': '-4.5em'
    }, 2000, 'easeInOutQuad');
};

如果您注意到上述情况，则会在最左侧发送nav以隐藏视图区域，一旦动画结束，导航就会变为left : -4.5em正常

function nav_out() {
    $('nav').animate({
        'left': '-4.5em'
    }, 200, 'easeInOutQuad');
}

所以主要问题是div id #underwater，这里是css

#underwater {
    display: none;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
    background: rgb(22, 57, 85) url("imgs/noise.png") top center no-repeat;
    z-index: 1500;
    overflow: auto!important;
}

点击

element.style {
    width: 594px;
    height: 750px;
    opacity: 1;
    display: block;
    overflow: hidden;
    background: rgb(16, 66, 89);
}

水波的HTML

#waves_1和#waves_2具有绝对定位

<div id="waves">
    <div id="waves_1" style="bottom: 0px;"></div>
    <div id="waves_2" style="bottom: 0px;"></div>
</div>

所有这一切的目的是我在一个单页网站上使用它，我显示隐藏在id #underwater下的内容，但当你点击例如菜单按钮时，我有几个他们使用相同的解决方法。我经常看到#waves_1和#waves_2的移动速度比#underwater快。

从我的逻辑来看，#waves_1和#waves_2应该与#underwater准确一致，因为#underwater低于#waves_1和#waves_2并且该函数创建一个动画，其中水的高度增加，并成为推高#waves_1和#waves_2的屏幕尺寸高度。

我解释了这个场景，如果有人能解决这个问题，欢迎任何改进。

我现在不能做JSfiddle版本，因为我认为缺陷是我上面的代码逻辑，但如果需要，我会创建一个JSfiddle

参考图像

problem

Answer 1

function q_about() {
    $("#waves_1, #waves_2").stop().animate({ // <--- these are being called at same time.
        'bottom': win.height()
    }, 750, 'easeInOutQuad');
    $("#underwater").css('height', 0).css('opacity', 1).show().animate({ // <--- these are being called at same time.
        'height': win.height() + 20
    }, 750, 'easeInOutQuad');
    $("#q_about").show(); // <--- these are being called at same time.
    $('nav').animate({ // <--- these are being called at same time.
        'left': '-4.5em'
    }, 2000, 'easeInOutQuad');
};

您需要研究使用promises或回调函数。使用jQuery的动画，它非常简单。如果您希望这些动画一个接一个地运行，请执行以下操作：

function q_about() {
        $("#waves_1, #waves_2").stop().animate({ // <-- this runs right away
            'bottom': win.height()
        }, 750, 'easeInOutQuad', function () {
            $("#underwater").css('height', 0).css('opacity', 1).show().animate({ // <-- this runs .75 seconds after start
                'height': win.height() + 20
            }, 750, 'easeInOutQuad', function () {
                $("#q_about").show({ // <-- this runs 1.5 seconds after start
                    'complete': function () {
                        $('nav').animate({ // <-- this runs 1.9 seconds after start (400 is default duration for `.show()`)
                            'left': '-4.5em'
                        }, 2000, 'easeInOutQuad');
                    }
                });
            });
        });
    };

此外，对于任何触发动画或某种类型的ajax请求的按钮，最好立即禁用该按钮，然后在动画和/或请求完成后重新启用它。

使用animate会导致某些元素行为怪异并弄乱逻辑

参考图像

1 个答案: