我有一个元素，其中在页面加载时通过 animate.css 应用了动画...
<div class="logo></div>
...添加了弹跳类，当动画完成时，删除弹跳类：
$(".logo").addClass("bounce");
$('.logo').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).toggleClass("bounce");
});
执行上述操作后，我希望现在在“.logo”悬停时出现动画：
$(".logo").hover(function () {
$(this).toggleClass("bounce");
});
但是，在 logo 悬停后，“.bounce”类被移除，动画仅在鼠标离开 logo 时发生，由于以下代码：
$('.logo').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).toggleClass("bounce");
});
如何编写代码以便不仅在页面加载时发生动画，而且仅在徽标悬停时而不是鼠标离开时发生动画？
您可以删除第一个附加事件，.off(...)然后添加新的悬停事件：
$(".logo").addClass("bounce");
$('.logo').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass("bounce");
$('.logo').off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');
$( ".logo" ).hover(
function() {
$( this ).addClass( "bounce" );
}, function() {
$( this ).removeClass( "bounce" );
}
);
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句