2

基本的に3つの画像を組み合わせたCSSスプライトである画像を作成しました。サイズは278x123なので、基本的には278x41の3枚の画像です。

私がやろうとしているのは、背景の位置を変えてそのアニメーションを作ることです。

私は多くのことを試しましたが、あまり機能しない解決策の1つは次のとおりです。

    var $slogan = $('#header h2 span');
$slogan.css({backgroundPosition: '0px 0px'});
function slogan_animation() {
    if ($slogan.css('background-position') == '0px 0px') {
        $slogan.fadeIn('slow').css('background-position', '0px -41px').fadeOut('slow');
    }
    else if ($slogan.css('background-position') == '0px -41px') {
        $slogan.fadeIn('slow').css('background-position', '0px -82px').fadeOut('slow');
    }
    else if ($slogan.css('background-position') == '0px -82px') {
        $slogan.fadeIn('slow').css('background-position', '0px 0px').fadeOut('slow');
    }
}
setInterval(slogan_animation, 2000);

どうすればそれができますか？

基本的には、次のことを行う必要があります。-背景の位置を「0px0px」に設定し、「0px -41px」、「0px -82px」の順に移動して、「0px0px」から再度ループします。それらの間にfadeIn（）効果があるのも素晴らしいでしょう。

何か案は？

ありがとうございました。

4

1 に答える 1

2

スタイルはbackground-position合成スタイルであるため、それを読んでも期待した結果が得られない場合があります。また、ブラウザによって結果が異なる場合があります。

スタイルから読み取るのではなく、変数を使用して位置を追跡してみてください。フェードインを開始する前に位置を設定します。

$(function(){

  var $slogan = $('#header h2 span');
  var offset = 0;

  window.setInterval(function(){
    $slogan.css('background-position', '0 -'+offset+'px')
    .fadeIn('slow')
    .fadeOut('slow');
    offset = (offset + 41) % 123;
  }, 2000);

});
于 2010-06-09T15:38:09.090 に答える