入力の変更ごとにアニメーションを実行するにはどうすればよいですか？

Question

いくつかの入力要素とやり取りする場合に表示されるアニメーションに取り組んでいます。入力変更イベントでは、クラスhighlightが追加され、1秒後に削除されます。

ラジオボタンを1秒より早く切り替えると、アニメーションが機能しなくなるという問題があります。すべての入力変更でアニメーションを実行するにはどのようなオプションが必要ですか？

$(':radio[name="group1"], :radio[name="group2"]').on('change', function(e) { 
 
    $('#' + this.getAttribute('name') + ' .selected').text(this.value); 
 
}); 
 

 
// 
 
// This to get the checked radios 
 
// 
 
$(':radio[name="group1"]:checked, :radio[name="group2"]:checked').trigger('change'); 
 

 

 
$("div").bind('DOMNodeInserted DOMNodeRemoved', function() { 
 
    $(this).addClass('highlight').delay(1000).queue(function(next){ 
 
     $(this).removeClass("highlight"); 
 
     next(); 
 
    }); 
 
});

input{ 
 
    display: none; 
 
} 
 

 
label{ 
 
    display: inline-block; 
 
    width:20%; 
 
    cursor: pointer; 
 
    padding: 20px; 
 
    margin: 10px; 
 
    background: #eee; 
 
    color: #111; 
 
} 
 

 
input:checked + label{ 
 
    background: #111; 
 
    color: #fff; 
 
} 
 

 
div{ 
 
    background: #eee; 
 
    color: #111; 
 
    padding: 10px; 
 
    margin: 4px; 
 
} 
 

 
div span{ 
 
    display: block; 
 
    margin: 4px; 
 
} 
 

 
.title{ 
 
    font-weight: bold; 
 
} 
 

 
div.highlight { 
 
    -webkit-animation: highlight 1s infinite; 
 
    -moz-animation: highlight 1s; 
 
    -o-animation: highlight 1s; 
 
    animation: highlight 1s; 
 
} 
 

 
@-webkit-keyframes highlight { 
 
    from {background-color: #0099cc;} 
 
    to {background-color: none;} 
 
} 
 
@-moz-keyframes highlight { 
 
    from {background-color: #0099cc;} 
 
    to {background-color: none;} 
 
} 
 
@-o-keyframes highlight { 
 
    from {background-color: #0099cc;} 
 
    to {background-color: none;} 
 
} 
 
@keyframes highlight { 
 
    from {background-color: #0099cc;} 
 
    to {background-color: none;} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<input id="a" type="radio" name="group1" value="Description group1 1" checked> 
 
<label for="a">Group1 Radio1</label> 
 
<input id="b" type="radio" name="group1" value="Description group1 2"> 
 
<label for="b">Group1 Radio2</label> 
 
<input id="c" type="radio" name="group1" value="Description group1 3"> 
 
<label for="c">Group1 Radio3</label> 
 

 

 
<input id="d" type="radio" name="group2" value="Description group2 1" checked> 
 
<label for="d">Group2 Radio1</label> 
 
<input id="e" type="radio" name="group2" value="Description group2 2"> 
 
<label for="e">Group2 Radio2</label> 
 
<input id="f" type="radio" name="group2" value="Description group2 3"> 
 
<label for="f">Group2 Radio3</label> 
 

 
<!-- Output value here --> 
 
<div id="group1"> 
 
    <span class="title">Group1</span> 
 
    <span class="selected"></span> 
 
</div> 
 

 
<div id="group2"> 
 
    <span class="title">Group2</span> 
 
    <span class="selected"></span> 
 
</div>

Answer 1

反対方向にそれらをキュー：

$("div").bind('DOMNodeInserted DOMNodeRemoved', function() { 
    $(this).removeClass('highlight').delay(10).queue(function(next) { 
    $(this).addClass("highlight"); 
    next(); 
    }); 
}); 

（および設定animetionループ一度に）