jquery wizard form step

2

hello community I have a small problem I'm trying to make a step form without any library and for that I'm using animate and some effects ...

in the html I have these 3 fieldeset with some inputs to fill and inside they have a button next that when clicking I will pass to the next fieldeset by an animation with jquery, and the last one has a finish button so I'm doing the following ...

<fieldset>
   <!-- some inputs-->
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset>
    <!-- some inputs-->
   <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset>
     <!-- some inputs-->
    <input type="button" name="next" class="next action-button" value="Finish" />
</fieldset>

js file

In the js I am capturing the parent element of the next buton with parent() to achieve the effect I want when doing the animation but it throws me the following error

  

TypeError: current_fs.animate is not a function [Learn More]   wizard.html: 230: 2

    var current_fs, next_fs, previous_fs; //fieldsets
    var left, opacity, scale; //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}, {//here is the error
        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+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

esete code is a bit long but I'm just posting the error part Any idea that I'm sick? thanks

    
asked by andy gibbs 28.09.2018 в 21:06
source

1 answer

2

The problem is that you are using version slim of jQuery that does not include the complete library. You must use the complete library jquery.min.js

var current_fs, next_fs, previous_fs; //fieldsets
    var left, opacity, scale; //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}, {//here is the error
        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+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<fieldset>
   <!-- some inputs-->
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset>
    <!-- some inputs-->
   <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset>
     <!-- some inputs-->
    <input type="button" name="next" class="next action-button" value="Finish" />
</fieldset>

    
    
answered by 28.09.2018 / 21:44
source