1
我有一個100%寬,284px高的div,叫做#photoStripe,背景圖片寬度爲5000px。然後在左側和右側的導航按鈕上方。這個想法是能夠左右平移,通過左右增量動畫背景圖像。用jQuery增量背景位置動畫
我使用的是popular background position plugin,它允許您同時爲背景位置的x和y值設置動畫。
好吧,背景動畫,但它只能做一次。 (不能一次點擊)。任何想法?
的jQuery:
$('#photoStripe').css({backgroundPosition:"0 0"});
$('a.moveLeft').click(function(){
$('#photoStripe').stop().animate({backgroundPosition:'-=200px 0'}, {duration:500});
});
$('a.moveRight').click(function(){
$('#photoStripe').stop().animate({backgroundPosition:'+=200px 0'}, {duration:500});
});
CSS:
#photoStripe {
width:100%;
height:286px;
text-align:center;
overflow:hidden;
background:url(../_images/photo_stripe.jpg);
}
謝謝!格雷戈裏我把你的代碼和增量添加了我的頁面上的其他代碼,並發現問題。這是因爲我正在調用背景位置插件。顯然,它不會增量動畫,更適合翻轉效果,以及任何您在同時對x和y位置進行動畫處理的場合。 – inorganik 2011-01-27 16:06:16