CSS3アニメーションのトリガー（jQueryの）

Question

私は別の要素（#babies、#kids、#teens、以上ホバーに基づいて一つの要素（#needle）のアニメーションをトリガーするいくつかの-である必要があり、基本的なjQueryのを書き込もうとしています#adults）。私はクラスが既に適用されているアニメーションをテストして、うまく動作するので、それは問題であるJQueryでなければなりません。

$('#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>

私は問題を表して考えるスニップを作りました。どのJQueryウィザードでどこが間違っているのか確認できますか？

Answer 1

コードを更新しました。ホバーアウト機能を追加しました。そうしないと、アニメーションは1回だけ機能します。

$('#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') } 
);