使 $(window).scroll() 上的 animate() 平滑答案

【问题标题】：Making animate() smooth on $(window).scroll()使 $(window).scroll() 上的 animate() 平滑
【发布时间】：2012-11-22 00:11:59
【问题描述】：

我正在尝试创建一个徽标图像，该图像在窗口滚动时以 50% 的大小进行动画处理。我的问题是动画在窗口滚动时运行了几次。如何在窗口滚动> 62px 时让它动画一次，如果窗口滚动回 62px 以上再一次？我尝试添加类并删除它们，但没有运气。我搜索了 SO，但找不到重复或类似的问题（如果有的话，我的错！）。

这里的JSFiddle：http://jsfiddle.net/jtheman/kEtPd/（在 jsfiddle 中添加了一些额外的 css 来模拟我的真实项目）

相关 HTML：

 <body>
   <header>
      <div id="logo">
           <img src="/img/logo.png">
       </div>
 ...

CSS：

header { position:relative;   }
header #logo { position:absolute; top: 62px; left: 0; width: 365px; height: 53px; }
header #logo img { position:absolute; bottom: 0; left: 0; width: 365px; height: 53px; }

还有我的 jQuery：

$(window).scroll( function() {
    var scrollpos = $(window).scrollTop();
    if (scrollpos > 62)
    {
        $('#logo img').stop().animate({ 'width': '182px', 'height': '26px'},1000);
    }
    else 
    {
        $('#logo img').stop().animate({ 'width': '365px', 'height': '53px'},200);
    }
});

【问题讨论】：

标签： jquery scroll jquery-animate

【解决方案1】：

您应该检查宽度是否仍为原始大小 (365px)，以便它仅在图像尚未开始调整大小时才会显示动画：

if (scrollpos > 62)
{
   if ($('#logo img').width() == 365){
     $('header').css({'position':'fixed','top':'-62px'});
     $('#logo img').stop().animate({ 'width': '182px', 'height': '26px'},1000);
   }
}

-- SEE WORKING DEMO --

【讨论】：

伟大的生硬。我现在正在实施该解决方案，看看它是否 100% 有效。我会尽快回来查看！
是的，工作！谢谢。我还在恢复动画上添加了一个检查，只是为了让if($img.width()<365) { ... 的调整大小工作更顺畅，这听起来是个好主意吗？（似乎工作得更好！），见jsfiddle.net/jtheman/kEtPd/3我的编辑。
有道理 :) 如果您在前 62px 内滚动，它将阻止它重新启动动画