jQuery animer plusieurs cours sur soumettre

Question

J'ai un groupe de 31 divs chacun avec une classe numérique. J'essaie de faire en sorte que tous les divs avec une classe d'aujourd'hui ou animent animent lorsque vous cliquez sur un bouton Soumettre.

<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>

Et ce morceau de jQuery, mais loin des œuvres et je ne peux pas pour la vie de moi comprendre pourquoi.

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

Je l'ai actuellement, donc chaque div individuel anime lorsque vous survolez-les sur eux, mais je veux également être en mesure d'animer un groupe d'entre eux lorsque vous cliquez sur le bouton Soumettre. Merci!

Answer 1

Le premier: vous devez retourner false du formulaire de fonction Soumettre (ne rechargez pas la page). Alors

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

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

et

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

Answer 2

Parce que le formulaire se soumet déjà avant que l'animation ne commence à s'exécuter, vous devez ajouter return false Après l'animation

comme ça

if (number <= day){

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

    return false;
}

else {

}

Answer 3

Pourquoi ne pas utiliser un attribut personnalisé sur le div? Essayez quelque chose comme ça.

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

Pour tester ce qui précède, ajoutez-le dans votre gestionnaire d'événements "OnSubmit" ou "Onhover" ...