在$(window).scroll()事件中使animate()更加流畅

Question

在$(window).scroll()事件中使animate()更加流畅

3

我正在尝试创建一个徽标图像，当窗口滚动时动画缩小到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);
    }
});

- jtheman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Curtis · Accepted Answer

您应该检查宽度是否仍为原始尺寸(365px)，这样只有在图像没有开始被调整大小时才会进行动画：

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

-- 查看可运行的演示 --