jQuery Animate Multiple Class su Invia

Question

Ho un gruppo di 31 div ciascuno con una classe numerica. Sto cercando di farlo in modo che tutti i div con una classe di oggi o precedente animate si fanno clic su un pulsante di invio.

<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 questo po 'di jQuery, ma è lontano dalle opere e non posso per la vita di me capire perché.

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

Attualmente ce l'ho in modo che ogni singolo div animazione si anima quando li si libra su di loro, ma voglio anche essere in grado di animarne un gruppo quando fai clic sul pulsante di invio. Grazie!

Answer 1

Il primo: devi restituire False dal modulo Funzione invio (non ricaricare la pagina). Quindi

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

Perché il modulo già invia prima dell'inizio dell'animata, dovresti aggiungere return false Dopo l'animata

come quello

if (number <= day){

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

    return false;
}

else {

}

Answer 3

Perché non utilizzare un attributo personalizzato sul div? Prova qualcosa di simile.

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

Per testare quanto sopra, aggiungilo nel gestore di eventi "Onsubmit" o "Onhover" ...