動畫div/fieldset中的多步表單

Question

我已經創建了一個循序漸進的演練。每個步驟都包含在一個單獨的「fieldset」中，整個文件是一個.html文件。

向前和向後移動我使用JavaScript。 問題是，隨着時間的推移，動畫開始滯後。

在附件中的例子中，一切正常，因爲內容很少。 優化問題在哪裏？

JsFiddle

HTML：

<form id="msform"> 
      <fieldset id="firstField"> 
         <input type="button" name="subject1" class="next action-button" value="Subject1 /> 
<input type="button" name="subject2" class="next action-button" value="Subject2 /> 
<input type="button" name="subject3" class="next action-button" value="Subject3 /> 
      </fieldset> 
      <fieldset id="subject1"> 
      <h2>Some text</h2> 
      <input type="button" name="prev" class="back action-button" value="Back" /> 
      <input type="button" name="previous" class="previous action-button" value="Reset" /> 
     </fieldset> 
    </form> 

的Javascript：

var current_fs, next_fs, previous_fs, back_fs; 
    var left, opacity, scale; 
    var animating; 
    var progress = []; 
    var message = "Funkcja niedostępna."; 
    $(".next").click(function() { 
     if (animating) return false; 
     animating = true; 
     current_fs = $(this).parent(); 
     next_fs = $('#' + $(this).attr('name')); 

     $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 
     progress.push($('fieldset:visible')); 

     next_fs.show(); 
     current_fs.animate({ 
      opacity: 0 
     }, { 
      step: function(now, mx) { 
       scale = 1 - (1 - now) * 0.2; 
       left = (now * 50) + "%"; 
       opacity = 1 - now; 
       next_fs.css({ 
        'left': left, 
        'opacity': opacity 
       }); 
      }, 
      duration: 800, 
      complete: function() { 
       current_fs.hide(); 
       animating = false; 
      }, 
      easing: 'easeInOutBack' 
     }); 
    }); 
    $(".previous").click(function() { 
     if (animating) return false; 
     animating = true; 
     current_fs = $(this).parent(); 
     previous_fs = $('#firstField'); 

     $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 

     previous_fs.show(); 
     current_fs.animate({ 
      opacity: 0 
     }, { 
      step: function(now, mx) { 
       scale = 0.8 + (1 - now) * 0.2; 
       left = ((1 - now) * 50) + "%"; 
       opacity = 1 - now; 
       current_fs.css({ 
        'left': left 
       }); 
       previous_fs.css({ 
        'transform': 'scale(' + scale + ')', 
        'opacity': opacity 
       }); 
      }, 
      duration: 800, 
      complete: function() { 
       current_fs.hide(); 
       animating = false; 
      }, 
      easing: 'easeInOutBack' 
     }); 
    }); 
    $(".back").click(function() { 
     if (animating) return false; 
     animating = true; 
     current_fs = $(this).parent(); 
     $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 

     back_fs = progress.pop(); 
     back_fs.show(); 
     current_fs.animate({ 
      opacity: 0 
     }, { 
      step: function(now, mx) { 
       scale = 0.8 + (1 - now) * 0.2; 
       left = ((1 - now) * 50) + "%"; 
       opacity = 1 - now; 
       current_fs.css({ 
        'left': left 
       }); 
       back_fs.css({ 
        'transform': 'scale(' + scale + ')', 
        'opacity': opacity 
       }); 
      }, 
      duration: 800, 
      complete: function() { 
       current_fs.hide(); 
       animating = false; 
      }, 
      easing: 'easeInOutBack' 
     }); 
    }); 

Answer 1

你曾經能夠使一個div按鈕的工作？

我下載了與使用jQuery和CSS3的進度條相同的「多步表單」。

我能夠顯示與DIV的字段集，但實際的按鈕...的onclick不工作，除非在div外。

所以儘管此進入下一步驟

<fieldset> 
<h2 class="fs-title">Create your account</h2> 
<h3 class="fs-subtitle">This is step 1</h3> 
<input type="text" name="email" placeholder="Email" /> 
<input type="password" name="pass" placeholder="Password" /> 
<input type="password" name="cpass" placeholder="Confirm Password" /> 
<input type="button" name="next" class="next action-button" value="Next" /> 

，而這其中並不

<fieldset> 
<h2 class="fs-title">Create your account</h2> 
<h3 class="fs-subtitle">This is step 1</h3> 
<input type="text" name="email" placeholder="Email" /> 
<input type="password" name="pass" placeholder="Password" /> 
<input type="password" name="cpass" placeholder="Confirm Password" /> 
<div class="pull-right"> 
    <input type="button" name="next" class="next action-button" value="Next" />     
</div> 

沒有什麼我沒試過......即使去掉動畫沒't work

回答你的問題...... :)

我改變了我的JS禁用（註釋掉）儘可能多的動畫儘可能並取得持續時間000 ...

//jQuery time 
var current_fs, next_fs, previous_fs; //fieldsets 
var opacity; //fieldset properties which we will animate 
var animating; //flag to prevent quick multi-click glitches 

$(".next").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    next_fs = $(this).parent().next(); 

    //activate next step on progressbar using the index of next_fs 
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 

    //show the next fieldset 
    next_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale current_fs down to 80% 
      //scale = 1 - (1 - now) * 0.2; 
      //2. bring next_fs from the right(50%) 
      //left = (now * 50)+"%"; 
      //3. increase opacity of next_fs to 1 as it moves in 
      opacity = 1 - now; 
      //current_fs.css({'transform': 'scale('+scale+')'}); 
      current_fs.css({'opacity': opacity}); 
      //next_fs.css({'left': left, 'opacity': opacity}); 
      next_fs.css({'opacity': opacity}); 
     }, 
     duration: 000, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

$(".previous").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    previous_fs = $(this).parent().prev(); 

    //de-activate current step on progressbar 
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 

    //show the previous fieldset 
    previous_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale previous_fs from 80% to 100% 
      //scale = 0.8 + (1 - now) * 0.2; 
      //2. take current_fs to the right(50%) - from 0% 
      //left = ((1-now) * 50)+"%"; 
      //3. increase opacity of previous_fs to 1 as it moves in 
      opacity = 1 - now; 
      //current_fs.css({'left': left}); 
      current_fs.css({'opacity': opacity}); 
      //previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); 
      previous_fs.css({'opacity': opacity}); 
     }, 
     duration: 000, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
});