jQuery События мыши - как стрелять несколько раз

Я пытаюсь создать что-то вроде моего босса, чтобы назвать «интерактивную инфографику», которая в значительной степени похожа на викторину.jQuery События мыши - как стрелять несколько раз

Мне было интересно, может ли кто-нибудь сказать мне, как я могу несколько раз запускать события jQuery? Нужно ли использовать цикл? В значительной степени у меня есть событие mouseenter и mouseleave, но они срабатывают только один раз.

Также у меня возникла проблема в том, что мои элементы h2 «jilt down», когда появляется галочка.

$(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

Благодаря кучу!

источник

2017-02-20 erayner

На 'mousenter' случае у вас есть' function'. Эта функция может делать столько кода, сколько вы хотите. Он может создать целый сайт. Он даже может программно запускать другие события мыши, хотя некоторые браузеры не согласны с этим методом и не блокируют его или не предупреждают пользователя (вы этого не хотите). Все, что вам нужно сделать, это положить все, что вы хотите, чтобы ваша функция выполняла внутри него. То же самое касается «mouseleave», конечно. –

вы не уничтожаете то, что делаете в вашем мышином центре в руке мыши. И наоборот. – Rooster

В jQuery есть два варианта создания прослушивателя событий. on() является активным слушателем, поэтому вы можете щелкнуть по нему так, как хотите, и он запускает событие. one() просто запускает его один раз для загрузки одной страницы. –

Мы собираемся сделать это шаг за шагом.

это лучше, чтобы добавить класс анимированного к верхним и нижним контейнеров в 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'); 
    } 

});

О клеща я не понял, что ты имел в виду

источник

2017-02-21 00:05:27

Чувак, ты потрясающий. большое спасибо за вашу помощь. :) В один прекрасный день вы станете отличным преподавателем. Плохо пометить сам по себе. еще раз спасибо – erayner

jQuery События мыши - как стрелять несколько раз

ответ

Смежные вопросы