Question

我正在尝试创建一个徽标图像，当滚动窗口时，该图像的动画效果为50％。我的问题是当窗口滚动时动画会运行几次。如何在滚动窗口时使其动画一次＆gt; 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);
    }
});

Answer 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 --

在$（window）.scroll（）上使animate（）平滑

1 个答案: