FadeIn和FadeOut跳转页面

时间:2016-03-14 09:36:30

标签: javascript jquery jquery-animate fadein page-jump

我有以下代码:

if (vm.theNextStep === true) {
    vm.theNextStep = false;
    vm.setSuccess = true;
    $('#theNextStep').fadeOut(500);
    $('#setSuccess').fadeIn(1500);
    $('#setSuccess').fadeOut(2000);
}
#setSuccess {
    padding-top: 2%;
    padding-bottom: 2%;
    background: #7CB130 url(check_white.png') no-repeat center;
    min-height: 85px;
    padding-right: 2%;
    margin-bottom: 2%;
}
<div id="setSuccess" ng-show="vm.paymentSuccess"></div>

页面跳转页面淡入 。我该如何解决?

1 个答案:

答案 0 :(得分:0)

页面跳转是因为你有两行代码一个接一个地运行,并没有等待一行完成它。

您可以将fadeIn代码放在第一个fadeOut的回调中:

if (vm.theNextStep === true) {
    vm.theNextStep = false;
    vm.setSuccess = true;
    $('#theNextStep').fadeOut(500, function(){
        $('#setSuccess').fadeIn(1500).fadeOut(2000);
    });

}