Javascript 使用jquery悬停重复CSS动画

我对jquery悬停函数执行的重复CSS动画有问题。您可以在此中看到问题的示例

打开演示时，请将鼠标悬停在第一颗星星上，然后从左向右平移鼠标。如您所见，动画会重复自身，导致口吃。如何修复此问题，使动画每颗星只发射一次，同时保持前几颗星高亮显示

HTML

---

您正在将动画应用于

：hover

选择器和

。请使用以下命令为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
}

相反，仅将动画应用于

：悬停

选择器

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

---

请参阅更新中的第一个星号组。

问题似乎是您正在清除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管理的非悬停状态具有不同的背景图像（空星）。这会导致当速率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
}

---

完整的演示在这里：

您可以在添加和删除类之前添加一些超时。

$(this).addClass('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
}