Jqueryクラスの変更が2番目の関数呼び出しで機能しなくなりました

Question

jqueryカルーセルの作成に取り掛かりました。この関数は、画像を左にスライドし、移動した位置に応じてクラスを変更します。 （あなたが "増加"と呼ばれるボタンをクリックした後）。それは、最初のように、左のイメージを削除し、中間のクラスを左に変更し、右を新しいイメージを右に追加し、それに正しいポジションクラスを与えるようにする必要があります。あなたが実際にそれを見たいのであれば、ここにフィドルがあります：http://jsfiddle.net/6fwbS/25/

2回目に関数が呼び出されると、すべてがうんざりします。新しい画像が追加されますが、不透明度は0で、クラスは.right_slotです。私がここで間違って何をしているのか？前もって感謝します。

function slide_img_left() { 

     var imgs = imgArr.length; 
     a++; 
     if (a >= imgs) { 
      a = 0; 
     } 

     b = a - 1; 
     c = a + 1; 

     if (b < 0) { 
      b = imgs - 1; 
     } 
     if (c >= imgs) { 
      c = 0; 
     } 

     var left = $('.left_slot'); var middle = $('.middle_slot'); var right = $('.right_slot'); 
     var newImg = imgArr[c][0]; 
     left.animate({ 
      opacity: 0, 
      left: '-=50px' 
     }, 300, function() { 
      left.remove(); 
     }); 


     middle.animate({ 
      left: '-=50px' 
     }, 300, function() { 
      middle.attr('class', 'left_slot'); 
      right.attr('class', 'middle_slot'); 
     }); 

     right.animate({ 
      left: '-=50px' 
     }, 300, function(){ 
      $("#basic_div").append(newImg); 
      newImg.attr('class', 'right_slot'); 
     }); 

     $("#varsDiv").html(" var b = " + b + " var a = " + a + " var c = " + c); 

    } 

Answer 1

• あなたは.clone()あなたのイメージかは、あなたが自分のスタイルに加えた変更を元に戻す必要があります。

  $("#basic_div").append(imgArr[b].clone()); 
  $("#basic_div").append(imgArr[a].clone()); 
  $("#basic_div").append(imgArr[c].clone()); 
  ... 
  function slide_img_left() { 
      ... 
      var newImg = imgArr[c].clone(); 
      ... 
  } 
  

• 左にleft_slotを移動し、それはちょうどあなたのレイアウトをねじ込むれる隠し。 middle_slotが見えなくなります。

これは、わずかに異なるフェードアウト効果を伴う増加機能のためのa working exampleです。