Discussion :

[Cvbdev]

Bonjour à tous,

Je souhaiterais exécuter la même chose en JQuery ou qu'il m’exécute la Class ci-dessous !

Est-ce que c'est possible ?
Si oui quels attributs ou méthode permettent de faire la même chose ?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.hvr-icon-hang {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    padding-right: 2.2em;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
 
}

D'avance merci !

[Sebastien14]

Bonjour,

Je ne comprends pas trop la question, mais si tu veux appliquer les attributs de cette classe à un élément, il te suffit de modifier la classe de cet élément avec Jquery. Tu peux utiliser la fonction toggleClass par exemple.

[Cvbdev]

Bonjour,

En fait je cherche à faire :

- Le même effet en JQuery (que la class CSS du premier message).
- Si ça ce n'est pas possible, est-ce que en JQuery ont peut faire appel à une class CSS (EX:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

exec ma class CSS

) ?

D'avance merci
++

[Sebastien14]

Une classe Css contient des propriétés qui s'appliquent à un élément de ta page, tu ne peux pas exécuter du css.

Tu veux qu'un élément prenne ces propriétés, il suffit de changer sa classe en mettant la tienne : .hvr-icon-hang

[Cvbdev]

Je penais qu'l existait des méthodes Jquery capable d'exécuter une class CSS !

En fait, j'ai une flèche verticale qui bouge (effet CSS) de haut en bas uniquement si on passe la souris dessus.

Seulement j'aimerais que cela soit tout le temps (sans que la souris passe dessus) et javais pensé par passé en JQuery !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
.hvr-icon-hang {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
padding-right: 6.7em;
    padding-top: 0.5em;
 
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
 
}
 
 
 
.hvr-icon-hang:before {
    content: "\f107";
    position: absolute;
    right: 1em;
    padding: 0 1px;
    font-family: FontAwesome;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    font-size: 50px;
}
 
 
.hvr-icon-hang:hover:before, .hvr-icon-hang:focus:before, .hvr-icon-hang:active:before {
  -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

++

[Sebastien14]

Par curiosité tu utilises quoi pour faire tout sa ?

Si il se passe quelque chose lorsque tu passes la souris sur ton élément, c'est soit qu'il y a une classe css déclarée pour cette élément lorsque la souris passe dessus, soit tu as déjà du code jquery qui change la classe au passage de la souris. Quel est le nom de la classe attribué à cet élément par défaut (avant que tu passes la souris dessus) ?