jQuery 다중 단계 양식 애니메이션 문제

Question

이 양식에 문제가 있습니다. 왼쪽의 슬라이드 여기 여기 내 jsFiddle file.

인 것은 내가 그것을 수행 할 작업을 내 JS

(function($) { 
    $.fn.formToWizard = function(options) { 
     options = $.extend({ 
      submitButton: "" 
     }, options); 

     var element = this; 

     var steps = $(element).find("fieldset"); 
     var count = steps.size(); 
     var submmitButtonName = "#" + options.submitButton; 
     $(submmitButtonName).hide(); 

     // 2 
     steps.each(function(i) { 
      $(this).wrap("<div id='step" + i + "'></div>"); 
      $(this).append("<p id='step" + i + "commands'></p>"); 



      if (i == 0) { 
       createNextButton(i); 
       selectStep(i); 
      } 
      else if (i == count - 1) { 
       $("#step" + i).hide(); 
       createPrevButton(i); 
      } 
      else { 
       $("#step" + i).hide(); 
       createPrevButton(i); 
       createNextButton(i); 
      } 
     }); 

     function createPrevButton(i) { 
      var stepName = "step" + i; 
      $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev'>Back</a>"); 

      $("#" + stepName + "Prev").bind("click", function(e) { 
       $("#" + stepName).hide(); 
       $("#step" + (i - 1)).show(function() { 
        $('.slide').animate({ 
         left: "0" 
        }, 500); 
       }); 
       $(submmitButtonName).hide(); 
       selectStep(i - 1); 
      }); 
     } 

     function createNextButton(i) { 
      var stepName = "step" + i; 
      $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next</a>"); 

      $("#" + stepName + "Next").bind("click", function(e) { 
       $("#" + stepName).hide(); 
       $("#step" + (i + 1)).show(function() { 
        $('.slide').animate({ 
         left: "0" 
        }, 500); 
       }); 
       if (i + 2 == count) $(submmitButtonName).show(); 
       selectStep(i + 1); 
      }); 
     } 

     function selectStep(i) { 
      $("#steps li").removeClass("current"); 
      $("#stepDesc" + i).addClass("current"); 
     } 

    } 
     })(jQuery); 

    $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' }) 
​ 

입니다 내가 다음을 클릭하면 (는를 왼쪽에서 오른쪽) 때 나는 내가 '뒤로'를 클릭 왼쪽으로 옮기기를 원합니다 (오른쪽에서 왼쪽). 난 내 애니메이션

$ ("# 단계"+ (I + 1)). 쇼 (함수() { $ ('. 슬라이드'). 애니메이션 ({ 왼쪽을하고있는 중이 야

: "0" }, 500); });

장르를 선택한 다음 뒤로를 클릭하면 8 Tracks과 유사합니다.

도움 주시면 감사하겠습니다.

Answer 1

오른쪽에서 오는 것을 보려면 실제로 거기에 있어야합니다! 코드에서 무엇을 실종됐다가 오른쪽에가는 요소였다 : 여기

$("#" + stepName).animate({ 
    left: "100%" 
}, 0); 

jsFiddle입니다 : 당신이 당신의 이전 요소를 싶어하면 나는 애니메이션 기능을 왼쪽

http://jsfiddle.net/T8WRM/16/

이동, 그래서 .show()를 제거하고 전체의 움직임을 볼 수 .hide 할 수

편집 :

하는 것으로 슬라이더 것에 대해서는 명확하게하려면 ,이 방법은 작동하지 않습니다. 즉, 다른보기를 다른 인덱스에 배치하여 대부분의 시간을 가져와 뷰홀을 통해 또는 조합 (이전, 다음, 현재)을 통해 이동하십시오.

Answer 2

예제를 살펴 보았습니다. 이 문제를 잘못된 방향으로 돌리고 있습니다.

8 트랙의 마크 업을 살펴보십시오. 3 개의 슬라이드는 hidden (css) 또는 jQuery (.hide())로 만들어지지 않습니다. 그들은 앞에 숨겨진 다른 div가 있기 때문에 "숨겨져"있어 사용자에게 숨겨져 있지만 기술적으로 볼 수 있습니다.

개별 "페이지"를 밀어 넣는 대신 3 개의 모든 페이지를 하나의 단위로 슬라이드합니다. 그러나 이전에 "숨겨진"페이지를 다루는 div는 정적으로 유지됩니다.

양식 페이지가 조립 라인에 3 종이이고 독수리가 내려다 보이는 경우를 상상해보십시오. 한 번에 하나의 용지 만 볼 수 있습니다 (다른 사람을 막는 칸막이가 있기 때문에). 다음 페이지로 이동하려면 조립 라인에서 "다음"을 누릅니다. 3 페이지 모두 한 슬롯 왼쪽으로 이동하고 이제 다음 페이지를 볼 수 있습니다.