Question

目前我正在尝试设置一个页面，以便点击一个按钮时，一个div .animates向上，另一个.animates向下，旧的div已成功。问题是他们都在同时使动画有点混乱。我想要做的是让动画在第一个div向上移动后暂停约2秒，然后降低第二个div。到目前为止，这是我的代码：

$(document).ready(function() {
    $('.aboutcontainer,.contactcontainer,.homecontainer,.portfoliocontainer,.musiccontainer').hide();
});
$(document).ready(function() {
    $(".homecontainer").show();
});
$(document).ready(function() {
    $('#about').click(function go() {
        $('.homecontainer,.musiccontainer, .portfoliocontainer, .contactcontainer').fadeOut({
            queue: false,
            duration: 'slow'
        });
        $('.homecontainer, .musiccontainer, .portfoliocontainer, .contactcontainer').animate({
            'margin-Top': "-1000px" //moves left
        });
        $('.aboutcontainer ').fadeIn({
            queue: false,
            duration: 'slow'
        });
        $('.aboutcontainer').animate({
            'margin-Top': "115px" //moves left
        });
    });
});

我尝试在此.delay(2000)之前插入.fadeIn：

 $('.aboutcontainer ').fadeIn

和.animate之前的另一个：

 $('.aboutcontainer').animate

.delay似乎根本不起作用（我使用lates jQuery版本）

奇怪的是我尝试使用setTimeout()函数，如下所示：

setTimeout(function() {
    $('.aboutcontainer ').fadeIn({
        queue: false,
        duration: 'slow'
    });

    $('.aboutcontainer').animate({
        'margin-Top': '115px' //moves left
    });
}, 2000);

当我执行.fadeIn暂停2秒但.animate没有。有人可以让我知道我在这里做错了吗？

Answer 1

位于your site .aboutcontainer的{{1}}位于main.css：131。

因此，从margin-top: 115px;到margin-top: 115px;的动画实际上什么也没做。

例如，您可以为margin-top: 115px;设置margin-top: -1000px并查看动画效果。

Answer 2

您缺少动画的时间参数，尝试为下面的动画添加时间。

setTimeout(function() {
    $('.aboutcontainer ').fadeIn({
        queue: false,
        duration: 'slow'
    });
        $(".aboutcontainer").animate({
            marginTop: "115px",
        }, 750);//Look at here..
}, 2000 );

这里是jsfiddle，请检查http://jsfiddle.net/ganeshgaxy/d6g1empb/

无法在.animate上设置提示

2 个答案: