jquery - 不同 Div 悬停时的 CSS3 动画触发器 (JQuery)

Question

我正在尝试编写一些应该是基本的 JQuery，它根据悬停在另一个元素 (#babies) 上触发一个元素 (#needle) 的动画、#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>

我截取了一个我认为代表问题的片段。任何 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') }
);