How do I change the animation effect of the wizard?

I made a simple jQuery Script wizard , works great.

Now my question?

How can I change animation to hide data to this jsfiddle animation of type tab?

    $(".next").click(function() {
       //store parent
       var parent = $(this).parent();
        if(parent.next().length) {
           parent.hide("slow").next().show("slow");
        }
        return false;
    });
    $(".prev").click(function() {
       var parent = $(this).parent();
        if(parent.prev().length) {
           parent.hide("slow").prev().show("slow");
        }
        return false;
    });

      

My complete code: https://jsfiddle.net/jwzjys8u/

+1


source to share


1 answer


I think you could use fade instead

 $(".next").click(function() {
   //store parent
   var parent = $(this).parent();
    if(parent.next().length) {
       parent.fadeOut("slow", function(){
            parent.next().fadeIn("slow");
       });
    }
    return false;
});
$(".prev").click(function() {
   var parent = $(this).parent();
    if(parent.prev().length) {
       parent.fadeOut("slow", function(){
            parent.prev().fadeIn("slow");
       });
    }
    return false;
});

      



Anyway, you can use CSS to make the transitions!

+2


source







All Articles