您需要使用
$.off
作用虽然有
内联
事件处理程序如果您想有选择性地选择应该删除哪些处理程序,这可能会很麻烦。但最简单的情况是不传递事件处理程序。这样,将删除给定事件的所有处理程序:
$('#on').click(function () {
$('#foo')
.addClass('move')
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function () {
$('#foo').removeClass('move');
console.log('done');
})
;
});
$('#off').click(function () {
$('#foo')
.removeClass('move')
// use `.off` and don't pass the handler
.off('webkitAnimationEnd oanimationend msAnimationEnd animationend')
;
});
#foo {
width: 100px;
height: 100px;
background: black;
}
#foo.move {
animation: foo-move 3s;
}
@keyframes foo-move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>
<button id="on">on</button>
<button id="off">off</button>
