JQuery Animate Multiple Class on Submit

Question

Eu tenho um grupo de 31 divs, cada um com uma classe numérica. Estou tentando fazê -lo para que todos os divs com uma classe de data de hoje ou animassem mais cedo ao clicar em um botão 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>

E esse pouco de jQuery, mas está longe de ser obras e não posso para a vida de mim descobrir o porquê.

$("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 {
    }
});

Atualmente, tenho, para que cada divisão individual anima quando você passa o mouse sobre eles, mas também quero poder animar um grupo deles ao clicar no botão Enviar. Obrigada!

Answer 1

O primeiro: você deve retornar false do formulário de função Enviar (não recarregue a página). Então

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

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

e

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

Answer 2

Porque o formulário já se envia antes do animado começar a correr, você deve adicionar return false depois do animado

Curtiu isso

if (number <= day){

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

    return false;
}

else {

}

Answer 3

Por que não usar um atributo personalizado na div? Experimente algo assim.

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 testar o exposto, adicione -o ao seu manipulador de eventos "Onsubmit" ou "ONHOVER" ...