Title: FadeIn and FadeOut jumps page
Tags: javascript;jquery;jquery-animate;fadein;page-jump
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"&gt;</div&gt;
The page jumps upon page fadeIn. How can i resolve it?


Here is another answer: 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);
});
Comment for this answer: In addition, if what you want to do a "crossfade" effect, use `position: absolute` for each step container.
Comment for this answer: @TrinhHoangAnh Absolutely! That can be done wrapping all the elements in a relatively positioned element and that will just work fine.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:03/14/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><jquery-animate><fadein><page-jump>', 'Title': 'FadeIn and FadeOut jumps page', 'ViewCount': 312, 'id': 35983912, 'user_AboutMe': '<p>Tech Enthu n friendly. Love to explore new things &amp; take up challenges and high responsibilities.</p>\n\n<h1>SOreadytohelp</h1>\n', 'user_AccountId': 359851.0, 'user_DisplayName': 'Smitha', 'user_Reputation': 6058.0, 'user_Views': 1518.0, 'user_id': 701502.0}}