使 $(window).scroll() 上的 animate() 平滑
Posted
技术标签:
【中文标题】使 $(window).scroll() 上的 animate() 平滑【英文标题】：Making animate() smooth on $(window).scroll() 【发布时间】：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);
);
【问题讨论】：
【参考方案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 内滚动，它将阻止它重新启动动画以上是关于使 $(window).scroll() 上的 animate() 平滑的主要内容，如果未能解决你的问题，请参考以下文章