jQuery animar múltiples clase en enviar

Question

Tengo un grupo de 31 divs cada uno con una clase numérica. Estoy tratando de hacerlo para que todos los Divs con una clase de fecha de hoy o animen anteriormente al hacer clic en un botón Enviar.

<div class="image 1">SAMPLE TEXT</div>
<div class="image 2">SAMPLE TEXT</div>
<div class="image 3">SAMPLE TEXT</div>
<div class="image 4">SAMPLE TEXT</div>
<form>
   <input class="previous" type="submit" value="View Previous" />
</form>

Y este poco de jQuery, pero lejos de funciona y no puedo por mi vida, por qué.

$("form").submit(function() 
    {
    var number = $('div.image').attr("class").match(/\d+/),
        d = new Date(),
        day = d.getDate();

    if (number <= day){
        $('div.image').animate({"height":"0px", "width":"150px", "bottom":"75px"}, 500);
    }
    else {
    }
});

Actualmente lo tengo, por lo que cada Div individual se anima cuando pases sobre ellos, pero también quiero poder animar un grupo de ellos al hacer clic en el botón Enviar. ¡Gracias!

Answer 1

El primero: debe devolver el formulario FALSE de la función Enviar (no volver a cargar la página). Después

d = new Date(),
day = d.getDate();

$(".image").each(function(i,e){
    var number = $(e).attr("class").match(/\d+/);
    if (number <= day)
        $(e).addClass('active'); 
});

y

$('div.active').animate({"height":"0px", "width":"150px", "bottom":"75px"}, 500);

Answer 2

Porque el formulario ya se envía antes de que el animado comience a ejecutarse, debe agregar return false Después del animado

como eso

if (number <= day){

    $('div.image').animate({"height":"0px", "width":"150px", "bottom":"75px"}, 500);

    return false;
}

else {

}

Answer 3

¿Por qué no usar un atributo personalizado en el DIV? Prueba algo como esto.

HTML:

<div class="image" number="1">SAMPLE TEXT</div>
<div class="image" number="2">SAMPLE TEXT</div>
<div class="image" number="3">SAMPLE TEXT</div>
<div class="image" number="4">SAMPLE TEXT</div>
<form>
   <input class="previous" type="submit" value="View Previous" />
</form>

JavaScript:

$('div.image').each(function()
{
    var number = $(this).attr('number'),
        d = new Date(),
        day = d.getDate();

    if (number <= day){
        $(this).animate({"height":"0px", "width":"150px", "bottom":"75px"}, 500);
    }
});

Para probar lo anterior, agréguelo a su manejador de eventos "onsubmit" o "onhover" ...