jqueryのホバーで繰り返すCSSアニメーション

Question

jqueryのホバー機能によって実行される繰り返しのCSSアニメーションに問題があります。この問題の例は、DEMOにあります。

デモを開くと、最初の星の上にマウスを置いて左から右に移動してください。あなたが見ることができるように、アニメーションは繰り返されて、吃音を引き起こします。どのようにしてこれを修正して、アニメーションが星1回につき1回だけ点火し、前の星を強調表示させます。

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 
} 

と更新Demoで最初の星のグループを参照してください.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; 
} 

をアニメーションプロパティを削除します。

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：ホバーがアクティブでなくなったときに、空白の星に置き換えられます。

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