How to animate a process master with jQuery?
I made a simple jQuery Script wizard works great, continuing the data, I would like to be able to add a process effect.
An example of this image:
How can I animate the shopping cart process to continue the process
step-1
animationitem1
process, etc.?
$(".button.next").click(function() {
//store parent
var step = $(this).parents(".step");
if (step.next().length) {
step.fadeOut("slow", function() {
step.next().fadeIn("slow");
});
}
return false;
});
$(".button.prev").click(function() {
var step = $(this).parents(".step");
if (step.prev().length) {
step.fadeOut("slow", function() {
step.prev().fadeIn("slow");
});
}
return false;
});
Full code: https://jsfiddle.net/Lkwanexe/1/
Thanks to the help of Tony Sumperi
source to share
This is an idea how to do it using jQuery animate .
1) You need to know the step width between steps, so I make my own map step | width
var lineStepWidth = {
1: 120,
2: 300,
3: 450
};
Add HTML5 Attribute Data to Define Step
<div class="step step-1" data-step="1">
It can be done with some css classes too.
2) Make your own function that will do the animation
$.fn.animateLine = function(step) {
var lineWidth = lineStepWidth[step]; // get step width from attribute and map
$('#line').animate({
width: lineWidth
}, 1000);
};
3) Add your own animation functions to your actions.
$.fn.animateLine(step.prev().data('step')); // step.next / step.prev
Here it is.
This is my idea for your next reflection on your problem.
source to share