javascript - CSS动画与jquery悬停重复

我有一个jquery悬停功能执行的重复CSS动画问题。您可以在此DEMO中查看问题的示例。

打开演示时，请将鼠标悬停在第一颗星上，然后从左向右平移鼠标。如您所见，动画会重复自身，从而造成结结。如何解决此问题，使动画每颗星星仅触发一次，而使先前的星星保持突出显示。

的HTML

<div class="GvStarContainer">
  <!--Style 1 STARTED-->
  <div class="GvStarTmp">

    <div class="margi-star">
      <div class="rate-ex1-cnt">
        <div id="1" class="star star-one-1 rate-btn star-one"></div>
        <div id="2" class="star star-one-2 rate-btn star-one"></div>
        <div id="3" class="star star-one-3 rate-btn star-one"></div>
        <div id="4" class="star star-one-4 rate-btn star-one"></div>
        <div id="5" class="star star-one-5 rate-btn star-one"></div>
      </div>
    </div>
  </div>
  <!--Style 1 FINISHED-->
  <!--Style 2 STARTED-->
  <div class="GvStarTmp">

    <div class="margi-star">
      <div class="rate-ex2-cnt">
        <div id="1" class="star star-two-1 rate-btn star-two"></div>
        <div id="2" class="star star-two-2 rate-btn star-two"></div>
        <div id="3" class="star star-two-3 rate-btn star-two"></div>
        <div id="4" class="star star-two-4 rate-btn star-two"></div>
        <div id="5" class="star star-two-5 rate-btn star-two"></div>
      </div>
    </div>
  </div>
  <!--Style 2 FINISHED-->
  <!--Style 3 STARTED-->
  <div class="GvStarTmp">

    <div class="margi-star">
      <div class="rate-ex3-cnt">
        <div id="1" class="star star-tree-1 rate-btn star-tree"></div>
        <div id="2" class="star star-tree-2 rate-btn star-tree"></div>
        <div id="3" class="star star-tree-3 rate-btn star-tree"></div>
        <div id="4" class="star star-tree-4 rate-btn star-tree"></div>
        <div id="5" class="star star-tree-5 rate-btn star-tree"></div>
      </div>
    </div>
  </div>
  <!--Style 3 FINISHED-->
</div>

JS

$(document).ready(function() {

  var prevStars = $(this).prevAll();
  var nextStars = $(this).nextAll();

  $(".star").hover(
    function() {
      var prevStars = $(this).prevAll();
      prevStars.addClass('rate-btn-hover');
    },
    function() {
      var prevStars = $(this).prevAll();
      prevStars.removeClass('rate-btn-hover');
    }
  );

  $("body").on("click", ".star", function() {
    var prevStars = $(this).prevAll().addBack();
    prevStars.addClass('rate-btn-active');
  });
});

最佳答案

您正在使用以下方法将动画应用于:hover选择器和.rate-btn-hover类：

.rate-ex1-cnt .rate-btn:hover, .rate-ex1-cnt  .rate-btn-hover, .rate-ex1-cnt  .rate-btn-active{
    background: url(http://www.oobenn.com/GvStar/css/img/rate-btn1-hover.png) no-repeat;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

而是仅将动画应用于:hover选择器

.rate-ex1-cnt .rate-btn:hover {
    background: url(http://www.oobenn.com/GvStar/css/img/rate-btn1-hover.png) no-repeat;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

并从.rate-btn-hover类中删除动画属性

.rate-ex1-cnt  .rate-btn-hover, .rate-ex1-cnt  .rate-btn-active{
    background: url(http://www.oobenn.com/GvStar/css/img/rate-btn1-hover.png) no-repeat;
}

请参阅更新的Demo中的第一颗星。