不同Div悬停时的CSS3动画触发器（JQuery）

Question

我试图写触发一个元素（的动画部分应该待基本JQuery的#needle基础上，将鼠标悬停在另一个元素（） #babies ， #kids ， #teens ，或#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> 

我made了一下，我认为这代表了问题。 任何JQuery向导都能看到我要去哪里了吗？

Answer 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') }
);