用jquery懸停重複的CSS動畫

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類動畫屬性

.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

問題似乎是，您正在清除懸停（）'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懸停事件不再需要，還可以去除

.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