1

これは、stackoverflow に関する私の最初の投稿です。皆さん、こんにちは!

jQuery アニメーションへの私の最初の試みは、上半分と下半分の 2 つの div に一連の画像を配置し、それらをフリップダウン トランジションで回転させることでした。

アニメーションを停止しましたが、ページ上で複数のアニメーションが同時に表示されることが問題です。私の問題は、jQuery セレクターの範囲を理解していないことが原因です。

 $(document).ready(function(){
  flippers($('.flipper'));
 });

 function flippers(divs){
  divs.each(function(i){
   $(".top_container img").each(function (j){
    $(this).attr("id",i+"t"+j);
   });
   $(".bottom_container img").each( function(j){
    $(this).attr("id",i+"b"+j);
   });
  });
  var flip_wait = 3600;
  setTimeout("flippers_start("+flip_wait+")",flip_wait);
 }

 function flippers_start(time,flipper){
  var curr_top = '#' + $('.top_container img:visible').attr('id');
  var curr_bottom = '#' + $('.bottom_container img:visible').attr('id');
  if( ($('.top_container img').size() - 1) <= curr_top[3] ){
   var next_top = curr_top.substring(0,3) + 0;
   var next_bottom = curr_bottom.substring(0,3) + 0;
  }
  else{
   var next_top = curr_top.substring(0,3) + (parseInt(curr_top[3]) + 1);
   var next_bottom = curr_bottom.substring(0,3) + (parseInt(curr_bottom[3]) + 1);
  }

  var height = $(curr_top).height();
  var width = $(curr_top).width();

  flip(height,width,curr_top,curr_bottom,next_top,next_bottom);
  setTimeout("flippers_start("+time+")",time);
 }

    function flip(height,width,fromtop,frombottom,totop,tobottom){
  var fliptime = 250;

  $(frombottom).css("z-index","1");
  $(tobottom).css("z-index","2");
  $(fromtop).css("z-index","2");
  $(totop).css("z-index","1");

  $(tobottom).css("height","1px").show();
  $(totop).show();
  $(fromtop).stop().animate({height:'0px',width:''+width+'px',marginTop:''+height+'px'},{duration:fliptime});
  window.setTimeout(function() {
  $(tobottom).stop().animate({height:''+height+'px',width:''+width+'px',marginBottom:'0px',opacity:'1'},{duration:fliptime});
  },fliptime-40);
  $(frombottom).slideUp();
  window.setTimeout(function(){
   $(fromtop).height(height).hide().css("margin-top","0px");
  },fliptime*2);

}

これが私が説明した一連の画像で実行されると、

<div class="flipper">
<div class="top_container">
 <img src="images/pink_floyd_img/dark1.jpg" class="top first" />
 <img src="images/pink_floyd_img/wall1.jpg" class="top second hidden" />
 <img src="images/pink_floyd_img/wish1.jpg" class="top third hidden" />
</div>
<div class="bottom_container">
 <img src="images/pink_floyd_img/dark2.jpg" class="bottom first" />
 <img src="images/pink_floyd_img/wall2.jpg" class="bottom second hidden" />
 <img src="images/pink_floyd_img/wish2.jpg" class="bottom third hidden" />
</div>
</div>

期待どおりに動作します。ただし、「フリッパー」divを複製すると、アニメーションは最初のセットで最初に実行され、次に2番目のセットで実行されます。

私はそれが起こったときにアニメーション化する各画像を選択する方法と関係があることを知っていますが、私がしていることを他にどのように行うかは本当にわかりません.

最終的な目標は、適切なクラスでマークアップされた div と画像をまとめて、アニメーションを実行するために動的に ID を設定できるようにすることです。各divの個別の呼び出し（すべてが同時に反転しないように発生する可能性があります）。

ありがとう！

4

2 に答える 2

0

StackOverflow も初めてです。お役に立てれば幸いです。

あなたがする必要があると思うのはflippers_start()、ページのフリッパーごとに個別に呼び出すことです。flipperその関数で既に持っている引数を使用できます。次のようになります。

function flippers(divs){
    var flip_wait = 3600;
    divs.each(function(i){
        var flipper = $(this);
        flipper.find(".top_container img").each(function (j){
            $(this).attr("id",i+"t"+j);
        });
        flipper.find(".bottom_container img").each( function(j){
            $(this).attr("id",i+"b"+j);
        });
        setTimeout(function(){
            flippers_start(flip_wait, flipper);
        },flip_wait);
    });
}

呼び出しを変更しsetTimeoutて最初の中に入れたeach()ので、それぞれに対して実行されます$('.flipper')。また、現在のフリッパー内の画像のみを選択するflipper.find(".top_container img")代わりにを使用していることと、 の 2 番目の引数としてを渡していることにも注意してください。$(".top_container img")flipperflippers_start()

function flippers_start(time,flipper){
    var curr_top = '#' + flipper.find('.top_container img:visible').attr('id');
    var curr_bottom = '#' + flipper.find('.bottom_container img:visible').attr('id');
    if( (flipper.find('.top_container img').size() - 1) <= curr_top[3] ){
        var next_top = curr_top.substring(0,3) + 0;
        var next_bottom = curr_bottom.substring(0,3) + 0;
    }
    else{
        var next_top = curr_top.substring(0,3) + (parseInt(curr_top[3]) + 1);
        var next_bottom = curr_bottom.substring(0,3) + (parseInt(curr_bottom[3]) + 1);
    }

    var height = $(curr_top).height();
    var width = $(curr_top).width();

    flip(height,width,curr_top,curr_bottom,next_top,next_bottom);

    setTimeout(function(){
        flippers_start(time, flipper);
    },time);
}

上記の関数flipperでは、現在のフリッパー div 内の画像のみを選択するために使用し続けsetTimeout、以前のように呼び出しを変更しました。

これがうまくいくことを願っています。

私が書いたものにスペルミスや文法上の誤りがあったことをお詫びします。私は英語のネイティブ スピーカーではありません。

于 2009-11-03T04:10:12.100 に答える
0

animate() 関数のシグネチャは次のとおりです。

animate(params, options)

オプションの 1 つは ですqueue。これは、アニメーションをアニメーション キューに追加するか ( true)、すぐに実行するか( ) をアニメーションに指示しますfalse。例えば：

$('#myelement').animate({ left: "50px", opacity: 1 }, { duration: 500, queue: false });

そのコードは、アニメーションを非同期で実行するように指示します。

詳細については、 http://docs.jquery.com/Effects/animate#paramsoptionsを参照してください。

于 2009-11-03T04:12:10.283 に答える