不同Div Hover上的CSS3动画触发器（JQuery）

Question

我正在尝试编写一些应该是基本的JQuery，它基于将鼠标悬停在另一个元素（#needle，#babies上，#kids来触发一个元素（#teens）的动画。 {1}}或#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') }
);