jQuery Mouse events - wie man mehrmals feuert

Question

Ich versuche etwas zu schaffen, das mein Chef gerne als "interaktive Infografik" bezeichnet, was ziemlich wie ein Quiz ist.

Ich fragte mich, ob mir jemand sagen könnte, wie ich meine jQuery-Ereignisse mehrmals auslösen kann? Muss ich eine Schleife verwenden? Ziemlich genau habe ich ein mouseenter und mouseleave Ereignis, aber sie feuern nur einmal.

Auch ich habe das Problem, dass meine h2 Elemente "jacken", wenn das Häkchen erscheint.

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

Werfen Sie einen Blick auf meine codepen here

Dank einem Haufen!

Answer 1

Wir machen das Schritt für Schritt.

• es ist am besten, die Klasse hinzuzufügen animiert in den oberen und unteren Behälter in HTML, so dass wir es nicht in JS mehrfach hinzuzufügen haben.

Wir wollen nicht unseren Code 1000-mal wiederholen, so haben wir Code in Funktionen wiederholt

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

Jetzt können wir diese Funktionen in unserem Event-Listener aufrufen. Ich benutzte zoomIn/zoomOut statt ein- und ausblenden, da diese nicht endgültig Animation

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

}); 

Über die Zecke zeigen kann ich nicht verstehen, was Sie