Question

我遇到了由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');
  });
});

Answer 1

您正在将动画应用于: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 class

中删除动画属性

.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中的第一个星组。

Answer 2

问题似乎是您正在清除hover（）'handleOut'函数中的前一个星号。你想要保留这些星星，因此你只想清除“下一个”星星，然后在退出包含星群的区域时单独管理所有星星的清理。

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

$(".margi-star div:first-child").hover(
    function() {
    },
    function() {
       $(this).children().removeClass('rate-btn-hover');
    }
);

通过这种方法，我通过设置当前控件类来处理动画的开始：

$(this).addClass('rate-btn-hover');

当前代码中纯css解决方案的难点在于您在 .rate-btn：hover 选择器中设置背景图片，但随后由管理的非悬停状态.rate-btn 有不同的背景图片（空星）。当 .rate-btn：hover 不再处于活动状态时，这会导致填充的星形被空白星代替。

由于我尝试修复时不再需要css悬停事件，您还可以从css中删除：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
}

完整的演示在这里：http://codepen.io/anon/pen/VKorea

用jquery悬停重复的CSS动画

2 个答案: