javascript中的动画每隔一段时间都有效

Question

我在html中获得了带有图片(id="actions")的下拉切换(id=imgAction)。我在javascript中添加了脚本

$(document).ready(function() {

    var el = document.getElementById("actions");

    if (el.addEventListener)
        el.onmouseover = tadaAnimation;

    function tadaAnimation() {
        $(imgAction).toggleClass('animated tada');
    }

 });

它每秒都有效。为什么每次我将鼠标悬停在下拉切换时它都不起作用。

Answer 1

主要问题是你只绑定mouseover事件处理程序。您还需要附加mouseout事件处理程序

每次鼠标进入或离开子元素时，都会触发mouseover，但不会mouseenter。因此，我建议您使用mouseenter代替mouseover

正在使用jQuery bind事件。我建议你使用.hover()

$(document).ready(function () {
    function tadaAnimation() {
        $("#imgAction").toggleClass('animated tada');
    }
    $("#actions").hover(tadaAnimation, tadaAnimation)
});

Answer 2

$(document).ready(function() {

var el = document.getElementById("actions");

if (el.addEventListener)
    el.onmouseover = tadaAnimation;
    el.onmouseout = tadaAnimation; // add this line, should works

function tadaAnimation() {
    $(imgAction).toggleClass('animated tada');
} });