CSS3 Animationen Trigger auf verschiedene Div Hover (JQuery)

Question

Ich versuche, etwas sollte-sein-basic JQuery zu schreiben, die eine Animation eines Elements auslöst (#needle) basierend auf dem Mauszeiger über ein anderes Element (#babies, #kids, #teens oder #adults). Ich habe die Animation mit der bereits angewendeten Klasse getestet und es funktioniert gut, also muss es die JQuery sein, die das Problem ist.

$('#babies').hover(
 
     function(){ $('#needle').addClass('animation-babies') }, 
 
    ) 
 
$('#kids').hover(
 
     function(){ $('#needle').addClass('animation-kids') }, 
 
    ) 
 
$('#teens').hover(
 
     function(){ $('#needle').addClass('animation-teens') }, 
 
    ) 
 
$('#adults').hover(
 
     function(){ $('#needle').addClass('animation-adults') }, 
 
    )

.stacking-boxes { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: yellow; 
 
    display: inline-block; 
 
    } 
 

 
.animation-babies { 
 
-webkit-animation: cssAnimation-babies 0.5s 1 ease; 
 
-moz-animation: cssAnimation-babies 0.5s 1 ease; 
 
-o-animation: cssAnimation-babies 0.5s 1 ease; 
 
} 
 

 
@-webkit-keyframes cssAnimation-babies { 
 
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px); } 
 
to { -webkit-transform: rotate(-40deg) scale(1) skew(1deg) translate(0px); } 
 
} 
 

 
@-moz-keyframes cssAnimation-babies { 
 
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(10px); } 
 
to { -moz-transform: rotate(-40deg) scale(1) skew(1deg) translate(0px); } 
 
} 
 

 
@-o-keyframes cssAnimation-babies { 
 
from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(10px); } 
 
to { -o-transform: rotate(-40deg) scale(1) skew(1deg) translate(0px); } 
 
} 
 

 

 

 

 
.animation-kids { 
 
-webkit-animation: cssAnimation-kids 0.5s 1 ease; 
 
-moz-animation: cssAnimation-kids 0.5s 1 ease; 
 
-o-animation: cssAnimation-kids 0.5s 1 ease; 
 
} 
 

 
@-webkit-keyframes cssAnimation-kids { 
 
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } 
 
to { -webkit-transform: rotate(40deg) scale(1) skew(1deg) translate(0px); } 
 
} 
 

 
@-moz-keyframes cssAnimation-kids { 
 
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } 
 
to { -moz-transform: rotate(40deg) scale(1) skew(1deg) translate(0px); } 
 
} 
 

 
@-o-keyframes cssAnimation-kids { 
 
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } 
 
to { -o-transform: rotate(40deg) scale(1) skew(1deg) translate(0px); } 
 
} 
 

 

 

 

 
.animation-teens { 
 
-webkit-animation: cssAnimation-teens 0.7s 1 ease; 
 
-moz-animation: cssAnimation-teens 0.7s 1 ease; 
 
-o-animation: cssAnimation-teens 0.7s 1 ease; 
 
} 
 

 
@-webkit-keyframes cssAnimation-teens { 
 
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px); } 
 
to { -webkit-transform: rotate(145deg) scale(1) skew(1deg) translate(0px); } 
 
} 
 

 
@-moz-keyframes cssAnimation-teens { 
 
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(10px); } 
 
to { -moz-transform: rotate(145deg) scale(1) skew(1deg) translate(0px); } 
 
} 
 

 
@-o-keyframes cssAnimation-teens { 
 
from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(10px); } 
 
to { -o-transform: rotate(145deg) scale(1) skew(1deg) translate(0px); } 
 
} 
 

 

 
.animation-adults { 
 
-webkit-animation: cssAnimation-adults 0.9s 1 ease; 
 
-moz-animation: cssAnimation-adults 0.9s 1 ease; 
 
-o-animation: cssAnimation-adults 0.9s 1 ease; 
 
} 
 
@-webkit-keyframes cssAnimation-adults { 
 
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px); } 
 
to { -webkit-transform: rotate(225deg) scale(1) skew(1deg) translate(0px); } 
 
} 
 
@-moz-keyframes cssAnimation-adults { 
 
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(10px); } 
 
to { -moz-transform: rotate(225deg) scale(1) skew(1deg) translate(0px); } 
 
} 
 
@-o-keyframes cssAnimation-adults { 
 
from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(10px); } 
 
to { -o-transform: rotate(225deg) scale(1) skew(1deg) translate(0px); } 
 
}

<div id="needle" style="width: 100%; max-width: 700px; height: 10px; background-color: blue" class="vertical-align-in-div"></div> 
 

 
<div id="babies" class="stacking-boxes"> 
 
    <h1>Babies</h1> 
 
</div> 
 

 
<div id="kids" class="stacking-boxes"> 
 
    <h1>Kids</h1> 
 
</div> 
 

 
<div id="teens" class="stacking-boxes"> 
 
    <h1>Babies</h1> 
 
</div> 
 

 
<div id="adults" class="stacking-boxes"> 
 
    <h1>Teens</h1> 
 
</div>

Ich habe ein snipped, dass ich denke, das Problem darstellt. Können JQuery-Assistenten sehen, wo ich falsch liege?

Answer 1

Ihr Code wurde aktualisiert. Hover-Out-Funktion hinzugefügt, sonst funktioniert die Animation nur einmal.

$('#babies').hover(
    function(){ $('#needle').addClass('animation-babies') }, 
    function(){ $('#needle').removeClass('animation-babies') } 
); 
$('#kids').hover(
    function(){ $('#needle').addClass('animation-kids') }, 
    function(){ $('#needle').removeClass('animation-kids') } 
); 
$('#teens').hover(
    function(){ $('#needle').addClass('animation-teens') }, 
    function(){ $('#needle').removeClass('animation-teens') } 
); 
$('#adults').hover(
    function(){ $('#needle').addClass('animation-adults') }, 
    function(){ $('#needle').removeClass('animation-adults') } 
);