Jquery animation() responds very slowly after few seconds

Question

The padding for the logo element will be padding: 9px 0; on load. When the user starts scrolling down the page I set the padding to 0px using animation() and when the user comes back to the top of the page the padding is set again to 9px 0 in jquery using animation(). Now the issue is animation when the user scrolls to the top of the page starts only after few seconds. I need it to occur immediately.

http://testing.coreintegrator.com/ Here is the demo of it

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if(scroll != 0){
        $('.logo').animate({padding: "0px 0px"});
    } else
    {
        $('.logo').animate({padding: "9px 0px"});
    }
});

Answer 1

This happen because, When you scroll the page, the animate function is called repeatedly. So, it's not a good idea to use animate function when scrolling a page. ‌
However, you can use a variable to avoid repeated calls to the animate function. See the example below:

$( document ).ready( function() {
  var scrolled = false;

  $( window ).scroll( function () {
    var scroll = $( window ).scrollTop();
 
    if ( scroll != 0 && !scrolled ){
      scrolled = true;
      $( '.logo' ).animate( {margin: '0'}, 'fast' );
    } else if ( scroll == 0 && scrolled ) {
      scrolled = false;
      $( '.logo' ).animate( {margin: '9px 0'}, 'fast' );
    }
  })
})

body {
  margin: 0;
  padding-bottom: 100%
}
.logo {
  display: block;
  position: fixed;
  margin-top: 9px;
  width: 300px;
  height: 100px;
  background: #eee url('https://cdn1.imggmi.com/uploads/2019/2/14/01eb69be0f0914245ef9a681d6d05172-full.png') no-repeat;
  -webkit-background-size: 100% auto;
     -moz-background-size: 100% auto;
      -ms-background-size: 100% auto;
       -o-background-size: 100% auto;
          background-size: 100% auto
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href='http://testing.coreintegrator.com/' class='logo'></a>

But in a better way, you can do it with CSS transition. See the example below:

$( document ).ready( function() {
  $( window ).scroll( function () {
    var scroll = $( window ).scrollTop();
 
    if( scroll != 0 ){
      $( '.logo' ).addClass( 'scroll' )
    } else {
      $( '.logo' ).removeClass( 'scroll' )
    }
  })
})

body {
  margin: 0;
  padding-bottom: 100%
}
.logo {
  display: block;
  position: fixed;
  margin-top: 9px;
  width: 300px;
  height: 100px;
  background: #eee url('https://cdn1.imggmi.com/uploads/2019/2/14/01eb69be0f0914245ef9a681d6d05172-full.png') no-repeat;
  -webkit-background-size: 100% auto;
     -moz-background-size: 100% auto;
      -ms-background-size: 100% auto;
       -o-background-size: 100% auto;
          background-size: 100% auto;
  -webkit-transition: all 100ms ease-out;
     -moz-transition: all 100ms ease-out;
       -o-transition: all 100ms ease-out;
          transition: all 100ms ease-out
}
.scroll {
  width: 150px;
  height: 50px;
  margin-top: 0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href='http://testing.coreintegrator.com/' class='logo'></a>

Note: The stop() method destroys any previous animation and does not prevent the recurrence of the 'animate' function when scrolling the page.

Answer 2

The problem is you are calling animation to many times so the animation is stack needs to finish first.

Call animation wisely, use the below code and try

   var lastScrollValue = 0;

   $(window).scroll(function (event) {

    var scroll = $(window).scrollTop();
        if(lastScrollValue==0){
            $('.logo').animate({padding: "0px 0px"});
        } else if(scroll==0 && scroll!=lastScrollValue)
        {
            $('.logo').animate({padding: "9px 0px"});
        }
    lastScrollValue = scroll;

    });

$(function() {
  var lastScrollValue = 0;
  $(window).scroll(function(event) {



    var scroll = $(window).scrollTop();
    console.log(scroll);
    if(scroll != 0){
    	$('.logo2').animate({padding: "0px 0px"});
    } else
    {
    	$('.logo2').animate({padding: "9px 0px"});
    }

    var scroll = $(window).scrollTop();
    if (lastScrollValue == 0) {
      $('.logo').animate({
        padding: "0px 0px"
      });
    } else if (scroll == 0 && scroll != lastScrollValue) {
      $('.logo').animate({
        padding: "9px 0px"
      });
    }
    lastScrollValue = scroll;

  });
})

.logo{
  position:fixed;
  top:0;
  background: red;
  
}

.logo2{
  position:fixed;
  left :100px;
   top:0;
  background: red;
  
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="logo">LOGO</div>
    <div class="logo2">WRONG LOG0 animation</div>


    <br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll

Answer 3

you are pushing too much animation sequence into the current stack, and this makes the page respond slowly since the last sequence hasnt finished... i use the stop() method. the stop() method destroys any previous animation and initializes a new one at any point in time... so in your case you can do this...

$(window).scroll(function (event) {
   var scroll = $(window).scrollTop();
    if(scroll != 0){
        $('.logo').stop().animate({padding: "0px 0px"});  //add the stop
    } else
    {
        $('.logo').stop().animate({padding: "9px 0px"});  //add here too..
    }
});

and if i guess correctly, you should have a smooth sequence with that.

Answer 4

1.) You need to debounce the execution of the function to ensure the rendering doesn't get blocked

2.) You can set a value in ms as your second parameter in the animate function