jquery - 简单的 jQuery 动画

Question

我已经发布了类似的问题，但没有回复。

我有一个 jQuery Mobile 网站，我需要在标题中添加一个简单的动画。

在这里查看我的 JSfiddle:http://jsfiddle.net/motocomdigital/twGHC/39/

我的标题中有一个 Logo ，它是 width:284px; height:58px; 并且它是一个 1px 透明 GIF - 被替换为背景图像。

我的背景图像包含我需要循环淡入淡出的两张幻灯片。

我需要 Logo 在图像上的这 2 个 css 规则之间循环(淡入/淡出):

div#header-logo a img {
    background-position: top;
}

和

div#header-logo a img {
    background-position: bottom;
} 

我认为 jquery css 属性是 { backgroundPosition, 'bottom' } 和 { backgroundPosition, 'top' }

每张幻灯片可以在循环之前显示 2 秒。

谁能告诉我仅使用 jQuery Mobile 是否可行？而不必引入新的插件。尝试通过函数使其尽可能轻便。

任何帮助都会非常感谢!

我的 HTML

<div id="header-logo">

     <a href="#home" data-direction="reverse">
          <img src="x.gif" alt="" style="width:284px;height:58px;" />
     </a>    

</div>

我的 CSS

div#header-logo {
    bottom: 0;
    position: relative;
    margin: 14px auto 0;
    padding: 0;
    width: 282px;
    height: 73px;
}

div#header-logo a img {
    width: 284px;
    height: 58px;
    background-image: url('http://www.freeimagehosting.net/newuploads/85137.png');
    background-size: 100% 200%;
    background-position: top;
    background-color: red;
}

如果您想体验，请在此处查看我的 JSfiddle... http://jsfiddle.net/motocomdigital/twGHC/39/

更新:第一个想法似乎工作正常，谢谢 Andy!看这里.. http://jsfiddle.net/motocomdigital/twGHC/40/

能再轻点吗？

Answer 1

如何定位图像的克隆，克隆具有 background-position: bottom 设置，然后间隔 2 秒到 .animate()每个图像的不透明度？可能不是最干净的方法，但是将此代码放入您的 fiddle 中对我来说在 Chrome 14 中适用，无需任何其他 CSS 或 HTML 更改。

var anchor = $('div#header-logo a');
var img = anchor.find('img');
var position = img.position();
var bottom = img.clone();
bottom.css({position:'absolute',top:position.top,backgroundPosition:'bottom','opacity':0});
$('div#header-logo a').append(bottom);

var cycleHeader = setInterval(function(){
    img.animate({'opacity':img.css('opacity') == 0 ? 1 : 0});
    bottom.animate({'opacity':bottom.css('opacity') == 0 ? 1 : 0});
}, 2000);