FadeIn and FadeOut jumps page

Question

I have the following code:

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>

The page jumps upon page fadeIn. How can i resolve it?

score 0 · Answer 1 · answered Mar 14 '16 at 09:38

0

The page jumps because you have two lines of code runs one after another, that doesn't wait for one to finish it.

You can put the fadeIn code in the callback of the first fadeOut:

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

}

answered Mar 14 '16 at 09:38

Jai

74,255
12
74
103

In addition, if what you want to do a "crossfade" effect, use `position: absolute` for each step container. – sl0th Mar 14 '16 at 09:50
@TrinhHoangAnh Absolutely! That can be done wrapping all the elements in a relatively positioned element and that will just work fine. – Jai Mar 14 '16 at 09:51

FadeIn and FadeOut jumps page

1 Answers1