Question

我正在尝试使元素淡出，然后在每次单击链接时淡入。我有以下代码，由于一些奇怪的原因它只适用于第一次点击。演示：http://jsfiddle.net/aueLr8k0/3/

$("body").on('click', 'a', function () {
   $("div").removeClass('fade').addClass('fade');
})

.fade {
    animation: fadeinout .5s;
}

@keyframes fadeinout {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#">Click this</a><br><br>
<div style="height:200px;width:200px;background:red"></div>

Answer 1

您可以收听animationend事件并删除其中的课程

＆＃13;

$("body").on('click', 'a', function () {
   $("div").addClass('fade').one('animationend', function() {
   	 $(this).removeClass('fade');
   });
})

＆＃13;

.fade {
    animation: fadeinout .5s;
}

@keyframes fadeinout {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click this</a><br><br>
<div style="height:200px;width:200px;background:red"></div>

＆＃13;

Answer 2

function handleOpenURL(url) { console.log("received url: " + url); }会立即执行并在功能上完成您最终会得到$("div").removeClass('fade').addClass('fade');类

根据您希望应用课程的顺序，您可能希望将超时添加到/ {/ 1}和fade

中

这是一个示例，其中addClass调用将立即执行，removeClass将在延迟后发生。

removeClass

addClass

$("body").on('click', 'a', function () {
  $("div").addClass('fade')
  setTimeout(function () { $("div").removeClass('fade') }, 1000) // 1000 milliseconds
})

Answer 3

尝试

MSVCR90.dll

为什么我的jQuery / CSS动画只能在第一次点击时起作用？

3 个答案: