Question

我正在努力创造一些我的老板喜欢称之为“交互式信息图”的东西。这非常类似于测验。

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

此外，我遇到的问题是我的h2元素＆＃34; jilt down＆＃34;当勾号出现时。

$(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代替show和hide，因为后者无法显示动画Final

$(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');
  }

});

关于刻度我不明白你的意思

jQuery Mouse事件 - 如何多次触发

1 个答案: