jQuery鼠标事件 - 如何多次触发

Question

我想创建一些我的老板喜欢的东西，称之为“交互式信息图”，这几乎就像一个测验。

我想知道是否有人可以告诉我如何让我的jQuery事件多次触发？我需要使用循环吗？几乎我有一个mouseenter和mouseleave事件，但他们只发射一次。

此外，我有问题，当出现勾号时，我的h2元素“下降”。

$(document).ready(function() { 
$('.user-answer-a').hide(); 
$('.user-answer-b').hide(); 
// slide in from right 
$('.left-side-container h2').addClass('animated slideInRight'); 
$('.answer-container h2').addClass('animated slideInRight'); 
// show tick on hover 
$('.right-side-container-top').on('mouseenter', function() { 
    $('.user-answer-a').show(); 
    $('.user-answer-a').addClass('animated zoomIn'); 
}); 
$('.right-side-container-top').on('mouseleave', function() { 
    $('.user-answer-a').show(); 
    $('.user-answer-a').addClass('animated zoomOut'); 
}); 
$('.right-side-container-bottom').on('mouseenter', function() { 
    $('.user-answer-b').show(); 
    $('.user-answer-b').addClass('animated zoomIn'); 
}); 
$('.right-side-container-bottom').on('mouseleave', function() { 
    $('.user-answer-b').show(); 
    $('.user-answer-b').addClass('animated zoomOut'); 
}); 
}); 

看看我的codepen here

感谢一大堆！

Answer 1

我们将一步一步做到这一点。

• 这是最好的动画添加到顶部和底部 容器中，HTML，所以我们没有将它添加在JS多次类。

我们不想重复我们的代码1000倍，所以我们把重复的代码 函数

function showA() { 
    $('.user-answer-a').removeClass('zoomOut').addClass('zoomIn'); 
    } 

function hideA() { 
    $('.user-answer-a').removeClass('zoomIn').addClass('zoomOut'); 
    } 

function showB() { 
    $('.user-answer-b').removeClass('zoomOut').addClass('zoomIn'); 
    } 

function hideB() { 
    $('.user-answer-b').removeClass('zoomIn').addClass('zoomOut'); 
    } 

现在我们可以在我们的事件监听器调用这些函数。我用zoomIn /缩小（ZoomOut），而不是显示和隐藏，因为后者不能显示动画的最后

$(document).ready(function() { 
    $('.user-answer-a').toggleClass('zoomOut'); 
    $('.user-answer-b').toggleClass('zoomOut'); 
    // slide in from right 
    $('.left-side-container h2').addClass('animated slideInRight'); 
    $('.answer-container h2').addClass('animated slideInRight'); 
    // show tick on hover 
    $('.right-side-container-top').on('mouseenter', function() { 
     showA(); 
     hideB(); 
    }).on('mouseleave', function() { 
     hideA(); 
    }); 
    $('.right-side-container-bottom').on('mouseenter', function() { 
     hideA(); 
     showB(); 
    }).on('mouseleave', function() { 
     hideB(); 
    }); 

    function showA() { 
    $('.user-answer-a').removeClass('zoomOut').addClass('zoomIn'); 
    } 

    function hideA() { 
    $('.user-answer-a').removeClass('zoomIn').addClass('zoomOut'); 
    } 

    function showB() { 
    $('.user-answer-b').removeClass('zoomOut').addClass('zoomIn'); 
    } 

    function hideB() { 
    $('.user-answer-b').removeClass('zoomIn').addClass('zoomOut'); 
    } 

}); 

关于蜱我不明白你的意思