jQueryのセレクタサンバ

Question

これは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を複製する場合しかし、アニメーションは最初の最初のセット上で実行され、その後など、第二セット上で実行されます。

私はそれが私はそれが起こるようにアニメーション化するために、各画像を選択しています方法とは何かを持っているけど、私は本当に私がやっているやってどのように他を知りません。

究極の目標は、一緒に適切なクラスでマークアップされたdiv要素や画像を置くことができるようにすることですし、それぞれを動的にアニメーションを実行するためにid'd設定されている - それらすべてが同時にアニメーションを開始するためにも、そして - でも彼らは（彼らは同時に、すべてのフリップをしないように起こって終わるかもしれない）各div要素に別々の呼び出しを持っている場合。

ありがとうございます。

Answer 1

このも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")を渡すことだけで画像を選択する代わりにflipperのflippers_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);
}

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

私はこれがあなたのために働く願っています。

私はあなたが私が書いたものの中に見つけることがすべてのスペルや文法の誤りをお詫び申し上げます。私は英語のネイティブスピーカーではないんです。

Answer 2

アニメーション（）関数シグネチャは

animate(params, options)

オプションの1つは、それがアニメーションキュー（queue）に追加する必要があるかどうかのアニメーションを伝えるか、すぐに（true）を実行しますfalse、です。たとえばます：

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

このコードは、非同期に実行するアニメーションを教えてくれます。

http://docs.jquery.com/Effects/animate#paramsoptions詳細はます。