简单的 jQuery 动画

Question

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

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

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

我的标题中有一个徽标，它是 width:284px; height:58px;，它是一个 1 像素的透明 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，然后每个图像的.animate() 和opacity 间隔2 秒？可能不是 最干净 的方法，但在 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);