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);
    }
});
4

1 回答 1

3

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

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

-- 查看工作演示 --

于 2012-12-04T11:22:31.363 回答