JQuery et animate.css

Fonction s'execute qu'une seule fois, ou je dois faire un double click

Sujet résolu

6 décembre 2018 à 17:03:25

Hello friends...😃 Autant dire que je suis presque nul en Javascript

Ma fonction ne s'execute qu'une seule fois, ou alors je dois faire un double click.

Merci d'avance pour vôtre aide.

https://codepen.io/Scriptintest/pen/yQmJmg

<!DOCTYPE html>

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'>
</head>
<body>
<style>
/*.setcolor{color:red}*/
</style>
	<p id="target" class="animated">HELLO SITE DU ZERO</p>
<script>
$(function(){
    $(this).click(function(){
        $("#target").toggleClass("bounce");
    });
});
</script>
</body>
</html>

-
Edité par goava 6 décembre 2018 à 17:22:01

mathias2oliveira

6 décembre 2018 à 17:31:02

Salut,

En gros au premier clique tu lui ajoutes la class "bounce" ce qui produit l'animation. Sauf qu'au second clique comme tu utilises la fonction toggle tu lui retires la class "bounce" ce qui ne produit rien du coup. Au troisième clique tu lui ajoutes la class "bounce" alors l'animation se produit et ça en boucle.

-
Edité par mathias2oliveira 6 décembre 2018 à 17:31:33

goava

6 décembre 2018 à 20:00:29

Merci Mathias 😉

Effectivement j'avais bien compris tout ce que tu me dit, l'ennuie c'est qu'avec addClass() c'est guère différent et je t'avouerai que je galère bien, je voudrais qu'à chaque clic cela fonctionne... Que faire...???

Une affaire de callBack, de trigger ou je ne sais quoi d'autres, avec un if else...???

Aurais tu une approche à me proposer s'il te plaît.

Merci d'avance

-
Edité par goava 6 décembre 2018 à 20:04:31

mathias2oliveira

6 décembre 2018 à 21:39:27

Un copier/coller de la fonction utilisé sur le site animate.css haha

https://codepen.io/mathiasdeoliveira/pen/dQxmxq

goava

6 décembre 2018 à 22:34:36

Wow Merci Matthias 😉

Je vais enfin pouvoir évoluer grace à ton exemple...

https://codepen.io/Scriptintest/full/RqXJeg

🙏🏼Merci mille fois 🙏🏼

-
Edité par goava 7 décembre 2018 à 13:47:50