Jquery 클래스 변경이 두 번째 함수 호출에서 작동하지 않습니다.

Question

jquery 캐로 셀을 만드는 중입니다. 이 함수는 이미지를 왼쪽으로 슬라이드하고 이동 한 위치에 따라 클래스를 변경합니다. ("증가"버튼을 클릭 한 후). 처음 이미지를 제거하고, 왼쪽 이미지를 제거하고, 중간 클래스를 왼쪽으로 변경하고, 오른쪽 이미지를 오른쪽에 추가하고, 올바른 위치 클래스를 제공합니다. 작동시이를보고 싶다면 여기를 클릭하십시오. http://jsfiddle.net/6fwbS/25/

두 번째로 함수가 호출되면 모든 것이 엉망이됩니다. 새 이미지가 추가되지만 불투명도는 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입니다.