用jquery悬停重复的CSS动画

I have a problem with a repeating CSS animation that is executed by a jquery hover function. You can see an example of the problem in this DEMO.

我有一个由jquery悬停函数执行的重复CSS动画的问题。您可以在本DEMO中看到问题的示例。

When you open the demo please hover over the first star and pan the mouse from left to right. As you can see the animation repeats itself causing a stutter. How can I fix this so that the animation only fire once per star, keeping the previous stars highlighted.

当您打开演示时,请将鼠标悬停在第一颗星上并从左向右平移鼠标。正如你所看到的那样,动画会重复出现,导致口吃。我该如何解决这个问题,以便动画每个星星只发射一次,保持前面的星星突出显示。

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>

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

2 个解决方案

#1

You are applying the animation to both :hover selector and .rate-btn-hover class with this:

您正在将动画应用于:hover selector和.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
}

Instead apply the animation only to :hover selector

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

.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
}

and remove the animation properties from .rate-btn-hover class

并从.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;
}

See first star group in updated Demo.

在更新的演示中查看第一个星组。

#2

The problem seems to be that you are clearing the previous stars in the hover() 'handleOut' function. You want to retain those stars as filled, therefore you only want to clear 'next' stars, and then separately manage the cleanup of all stars as you exit the area containing the group of stars.

问题似乎是您正在清除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');
    }
);

With this approach I am handling the start of the animation through script by setting the current controls class:

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

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

The difficulty with a pure css solution in your current code is that you are setting a background image in your .rate-btn:hover selector, but then the non hover state managed by .rate-btn has a different background image (empty star). This causes the filled star to be replaced with a blank star when .rate-btn:hover is no longer active.

您当前代码中纯css解决方案的难点在于您在.rate-btn:hover选择器中设置背景图像,但是.rate-btn管理的非悬停状态具有不同的背景图像(空星) 。当.rate-btn:悬停不再有效时,这会导致填充的星形被空白星代替。

As the css hover event is no longer required in my attempted fix, you can also remove the :hover selector from your css as follows:

由于我尝试修复时不再需要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
}

The full demo is here: http://codepen.io/anon/pen/VKorea

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

#1