Question

我正在处理如果您与某些输入元素进行交互时出现的动画。在输入更改事件中，脚本会添加类highlight并在延迟1秒后将其删除。

问题是，如果我切换单选按钮的速度超过1秒，动画就不起作用了。在每次输入更改时，我有什么选项来运行动画？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

将它们排在相反方向：

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

（并将animetion循环设置为一次）

如何在每次输入更改时运行动画？

1 个答案: