I have made a simple Wizard Script jQuery works perfectly when continuing with the data, I would like to be able to add the effect of the process in which step it is.
My question:
Can you explain to me how I can animate the process so that the cart image continues with the process, step-1animation of the process item1and so on?
Example:
$(".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;
});body {
font-family: Trebuchet MS;
font-size: 12px;
}
.Bread {
position: absolute;
bottom: 40px;
right: 0;
width: 630px;
height: 16px;
background: url(//drh.img.digitalriver.com/DRHM/Storefront/Site/avast/cm/images/avast/2014/breadcrumb-3.png) no-repeat;
list-style-type: none;
text-transform: uppercase;
}
.proceso {
position: absolute;
top: -20px;
white-space: nowrap;
width: 220px;
}
.proceso.active {
color: #000;
}
.item1 {
left: 0;
text-align: left;
}
.item2 {
left: 160px;
}
.item3 {
left: 335px;
}
.item4 {
left: 475px;
}
.item5 {
left: 565px;
}
.item6 {
left: 635px;
}
.wrap {
clear: both;
padding: 8px 0;
}
.wrap label {
display: block;
float: left;
width: 150px;
padding: 4px;
line-height: 12px;
}
.wrap input,
.wrap textarea {
display: block;
font-size: 12px;
line-height: 12px;
float: left;
width: 200px;
border: 1px solid #888;
padding: 4px 8px;
}
.button {
background: #333;
color: #f2f2f2;
display: inline-block;
padding: 4px 8px;
text-decoration: none;
border: 1px solid #ccc;
}
.button:hover {
background: #888;
color: #000;
}
br.clear-last {
clear: both;
margin: 15px 0;
}
.step {
display: none;
}
.step-1 {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="Bread">
<li class="proceso item1 active">Carro de la compra</li>
<li class="proceso item2">Datos de facturación</li>
<li class="proceso item3">Metodo de pago</li>
<li class="proceso item4">Revisión</li>
<li class="proceso item5">Pagar</li>
<li class="proceso item6">Pedido finalizado</li>
</ul>
<div class="step step-1">
<div class="wrap">
<label for="name">Name</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Email</label>
<input id="email" type="text" />
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<div class="sub">
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
</div>
<div class="step step-2">
<div class="wrap">
<label for="name">Mobile</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Address</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<div class="sub">
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
</div>
<div class="step step-3">
<div class="wrap">
<label for="name">Some</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Other</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Fields</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<div class="sub">
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
</div>
<div class="step step-4">
<div class="wrap">
<label for="name">Some</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Other</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Fields</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<div class="sub">
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
</div>
<div class="step step-5">
<div class="wrap">
<label for="name">Some</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Other</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Fields</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<div class="sub">
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
</div>
<div class="step step-6">
<div class="wrap">
<label for="name">Some</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Other</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Fields</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<div class="sub">
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
</div>
Well, first of all you have to keep in mind that you are using a technique called sprite where what you do is group all your images and then show sections by locating the position and size
backgroudof your element, as described in http:// drh.img.digitalriver.com/DRHM/Storefront/Site/avast/cm/images/avast/2014/breadcrumb-3.pngNow this is your image:
You will then notice that you have three grouped images of about 16px tall each. Now you have defined a class like this:
Note that you have defined a static height for the image and since it measures 16+16+16=48 you will see a truncated image “which is the idea at the end of the day”, originally you will only see the first 16px of height of your image, but if you want to change this you just have to use the property
background-position: X Y;where X and Y indicate the start position of each axis correspondingly, so you can then manipulate the progress of the axis likestepso:Once you know this, I think you will understand that it is a bit insufficient for a menu with more than 3 states, however to continue with the theme of progress using JQuery I will show a modified extract of your proposal:
I hope this is illustrative enough to give you an idea of what you are looking for, I removed some of the code to focus on the important sections for this answer.