1
#potoStripeと呼ばれる幅100%、高さ284pxのdivが5000pxの幅広の背景イメージを持っています。次に、その上に左右のナビゲーションボタンがあります。アイデアは、背景画像を左右に徐々にアニメーション化することで、左にパンすることができるようにすることです。jQueryを使用したインクリメンタルバックグラウンドポジションのアニメーション
私はpopular background position pluginを使用しています。これにより、背景位置のxとy値を同時にアニメーション化することができます。
まあ、バックグラウンドはアニメーション化されますが、1回しか実行されません。 (何度も何度もクリックすることはできません)。
の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