简单的 jQuery 动画

Question

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

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

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

我我的标题中有一个徽标，宽度为：284px； height:58px; 这是一个 1px 透明 GIF - 被背景图像替换。

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

我需要徽标在图像上的这 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/

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

可以吗有打火机吗？

Answer 1

如何定位图像的克隆，将克隆设置为 background-position: Bottom，然后将 2 秒的间隔设置为 .animate() 每个图像的不透明度？可能不是最干净的方法，但将此代码放入您的小提琴中对我来说在 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);