Question

徽标元素的填充为填充：9px 0;负载。当用户开始向下滚动页面时，我使用animation（）将填充设置为0px，当用户返回页面顶部时，使用animation（）在jquery中将填充再次设置为9px 0。现在的问题是动画，当用户滚动到页面顶部时，仅在几秒钟后才开始。我需要它立即发生。

http://testing.coreintegrator.com/ 这是它的演示

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

Answer 1

1。）您需要debounce执行函数以确保渲染不会被阻塞

2。）您可以在ms函数中将animate中的值设置为第二个参数

Answer 2

问题是您多次调用动画，因此需要先完成动画的叠加。

明智地调用动画，请使用以下代码并尝试

   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

您将过多的动画序列推入当前堆栈，这使页面响应缓慢，因为最后一个序列尚未完成...我使用stop（）方法。 stop（）方法销毁任何先前的动画并在任何时间点初始化一个新的动画...因此您可以这样做...

$(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..
    }
});

如果我猜对了，那你应该有一个顺畅的顺序。

Answer 4

之所以发生这种情况，是因为，当您滚动页面时，会反复调用animate函数。因此，滚动页面时使用animate函数不是一个好主意。 br
但是，可以使用变量来避免重复调用animate函数。请参见下面的示例：

$( 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>

但是更好的方法是，可以使用CSS transition来实现。请参见下面的示例：

$( 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>

注意：stop()方法会破坏以前的所有动画，并且不会阻止滚动页面时再次出现“动画”功能。

jQuery animation（）几秒钟后响应非常缓慢

4 个答案: