Ajouter une animation de classe en cliquant sur jquery

LearntoExcel

J'essaye d'ajouter une classe d'animation à mon div en utilisant jquery onclick mais cela ne semble pas fonctionner. Quelqu'un voudrait-il prendre quelques secondes pour regarder mon violon et m'en expliquer la raison? Merci. Ce que j'essaie d'accomplir en termes généraux, c'est que je veux que la division augmente en cliquant sur le bouton.

https://jsfiddle.net/dLko979f/

<div id="clickable">
<a href=# name="enlarge" onclick="return false;">Click to enlarge</a>
</div>

$(function() {                       //run when the DOM is ready
  $("#clickable > a").onClick(function() {  //use a class, since your ID gets mangled
    $("#clickable").addClass(".popout");      //add the class to the clicked element
  });
});

#clickable {
background: #eee;
color: #fff;
font-size: 2em;
left: 112px;
padding: 40px;
position: absolute;
top: 200px;
}
.popout {
    animation: popout 1s ease;
    -webkit-animation: popout 1s ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes popout {
    from{transform:scale(1)}
    to{transform:scale(1.5)}
}
@-webkit-keyframes popout {
    from{transform:scale(1)}
    to{transform:scale(1.5)}
}
Louys Patrice Bessette

J'ai modifié votre violon.

Vous n'étiez pas trop loin ...
Mais vous avez eu quelques erreurs de syntaxe.
Et pas de lib jQuery en violon ...;)

Votre code corrigé:

$(function() {                       //run when the DOM is ready
  $("#clickable a").click(function() {  //use a class, since your ID gets mangled
    $("#clickable").addClass("popout");      //add the class to the clicked element
  });
});

Travailler dans ce violon

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

TOP liste

chaudétiquette

Archive