簡單的jQuery動畫

我發佈了類似的問題，但沒有迴應。簡單的jQuery動畫

我有一個jQuery手機網站，我需要一個簡單的動畫在我的頭。

見我的jsfiddle這裏：http://jsfiddle.net/motocomdigital/twGHC/39/

我有一個標誌在我的頭是width: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/

UPDATE：第一個想法似乎做工精細，感謝安迪！見這裏.. http://jsfiddle.net/motocomdigital/twGHC/40/

它可以得到更輕？

來源

2011-08-11 Joshc

如何定位圖像的克隆，設置克隆爲background-position: bottom，然後每隔2秒間隔.animate()opacity？可能不是最乾淨的的方式來做到這一點，但將這些代碼放入你的小提琴在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);

來源

2011-08-11 10:30:57 andyb

嗨安德伯，似乎做的好戲。好又輕，謝謝你在這裏的時間！ http://jsfiddle.net/motocomdigital/twGHC/40/ – Joshc

簡單的jQuery動畫

回答

相關問題