7

He realizado un simple Wizard Script jQuery funciona perfectamente al continuar con los datos, me gustaría poder añadirle el efecto del proceso en que paso se encuentra.

Mi pregunta:

¿Me pueden explicar cómo puedo animar el proceso que la imagen del carrito continué con el proceso step-1 animación del proceso item1 y así sucesivamente?

Ejemplo:

introducir la descripción de la imagen aquí

 $(".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>

1 respuesta 1

4
+50

Bueno, primero que todo tienes que tener en cuenta que estas usando una técnica llamada sprite donde lo que haces es agrupar todas tus imágenes y luego mostrar secciones ubicando la posición y tamaño del backgroud de tu elemento, tal y como lo describen en http://drh.img.digitalriver.com/DRHM/Storefront/Site/avast/cm/images/avast/2014/breadcrumb-3.png

Un sprite de la imagen es una colección de imágenes puestas en una sola...

Ahora esta es tu imagen:

Progreso de 3 etapas

Notaras entonces que tienes tres imágenes agrupadas de mas o menos 16px de alto cada una. Ahora has definido una clase así:

.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;
}

Date cuenta que has definido un alto estático para la imagen y puesto que esta mide 16+16+16=48 veras una imagen truncada «que es la idea a final de cuentas», originalmente solo veras los primeros 16px de alto de tu imagen, pero si deseas cambiar esto solo debes valerte de la propiedad

background-position: X Y; donde X y Y indican las posición de inicio de cada eje correspondientemente, así entonces usted podrá manipular la el progreso del step así:

.Bread.step1 {    
    background-position: 0 0;
}

step 1

.Bread.step2 {    
    background-position: 0 -16;
}

step 2

.Bread.step3 {    
    background-position: 0 -32;
}

step 3

Una vez sabiendo esto, creo que entenderás que es un poco insuficiente para un menú de mas de 3 estados, sin embargo para continuar con la temática del progreso usando JQuery mostrare un extracto modificado de tu propuesta:

var posY = 0;
    
    $(".button.next").click(function () {
        var step = $(this).parents(".step");
        if (step.next().length) {
            step.fadeOut("slow", function () {
                step.next().fadeIn("slow");
                /* posicionas la imagen 16 pixeles mas abajo de la posicion actual */
                posY = posY - 16;
                $(".Bread").css("background-position",`0px ${posY}px`);
            });
        }
        return false;
    });
    $(".button.prev").click(function () {
        var step = $(this).parents(".step");
        if (step.prev().length) {
            step.fadeOut("slow", function () {
                step.prev().fadeIn("slow");
                /* posicionas la imagen 16 pixeles mas arriba de la posicio actual */
                posY = posY + 16;
                $(".Bread").css("background-position",`0px ${posY}px`);
            });
        }
        return false;
    });
.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;
}

.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"></li>
  <li class="proceso item2"></li>
  <li class="proceso item3"></li>
</ul>

<div class="step step-1">step 1
  <div class="sub">
    <a class="button prev" href="#">Previous</a>
    <a class="button next" href="#">Next</a>
  </div>
</div>
<div class="step step-2">step 2
  <div class="sub">
    <a class="button prev" href="#">Previous</a>
    <a class="button next" href="#">Next</a>
  </div>
</div>
<div class="step step-3">step 3
  <div class="sub">
    <a class="button prev" href="#">Previous</a>
    <a class="button next" href="#">Next</a>
  </div>
</div>

Espero que esto sea lo suficientemente ilustrativo para darte una idea de lo que buscas, quite parte del código para centrarme en las secciones importantes para esta respuesta.

6
  • Buenos días amigo, el sprite de la imagen tiene solución amigo mediante edición de algunos de estos programas Photoshop o fireworks... O a la vez solucionarlo con estilos css aplicando una barra de progreso ahora lo que en sí me gustaría es que me des una pista o me puedas explicar de cómo animar el proceso con jQuery.
    – Otto
    el 27 jun. 2017 a las 12:13
  • He añadido un ejemplo de como aumentar o disminuir el progreso usando JQuery, espero que te sea de utilidad.
    – NekoOs
    el 27 jun. 2017 a las 14:40
  • Estoy muy interesada en sus respuestas publicadas, pero si cambio la imagen no me funciona, que tipo de imagen debe ser, la guarde localmente y no me queda. Si alguien me pudiera ayudar se lo agardeceria.
    – nora
    el 10 oct. 2017 a las 2:54
  • Si no crees que sea necesario abrir una nueva pregunta podríamos continuar por chat: chat.stackexchange.com/rooms/66922/nekoos
    – NekoOs
    el 11 oct. 2017 a las 2:45
  • @NekoOs Amigo tengo una nueva pregunta similar pero esta vez lo he realizado de manera más simple y sencilla pero tengo el problema en cómo animar el proceso del wizard puedes echarle un ojo :) a esta pregunta
    – Otto
    el 10 dic. 2017 a las 2:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.