I am trying, in my own IDE, to implement an example of animate.css in use. I found the example here. The difference is that the example uses vanilla JavaScript, while I am trying to convert it to jQuery.
I have a button with an onclick that is supposed to call the function toggleMenu(), but that function is not working. The console logs say that the function is not defined, while my script file says the function is declared but its value is never read. There’s probably a simple explanation, but for some reason I can’t see the problem.
Here is the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade-in menu</title>
<script src="https://kit.fontawesome.com/f2cc866093.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="menu">
<ul>
<li>Posts</li>
<li>Add new post</li>
<li>Comments</li>
<li>Images</li>
<li>Videos</li>
<li>Users</li>
</ul>
</div>
<button class="toggle-menu" onclick="toggleMenu()">
<i class="fas fa-bars"></i>
</button>
</body>
</html>
jQuery:
$(function() {
var isOpen = false;
function toggleMenu() {
const menuElement = $('.menu');
const toggleIcon = $('.fas');
if (!isOpen) {
menuElement.addClass('animate__animated', 'animate__fadeInLeft', 'open');
toggleIcon.removeClass('fa-bars');
toggleIcon.addClass('fa-times');
isOpen = true;
} else {
menuElement.removeClass('animate__fadeInLeft');
menuElement.addClass('animate__animated', 'animate__fadeOutLeft');
toggleIcon.removeClass('fa-times');
toggleIcon.addClass('fa-bars');
isOpen = false;
}
function handleAnimationEnd() {
menuElement.removeClass('animate__animated', 'animate__fadeInLeft', 'animate__fadeOutLeft');
if (!isOpen) {
menuElement.removeClass('open');
}
menuElement.off('animationend');
}
menuElement.on('animationend', function() {
handleAnimationEnd();
});
}
});
I don’t think the CSS is relevant, so I won’t post it now, but I will add it if any of you think it would have value.
>Solution :
Do not use inline handlers.. They require global pollution, have a demented scope chain, and have a range of other problems. Among those problems is the inability for other JavaScript to see that the function is being called.
Even without the linter warning, your current code won’t work because toggleMenu is declared inside the function, and so won’t be visible to the inline handler.
Attach the listener with JavaScript:
<button class="toggle-menu">
and change
$(function() {
var isOpen = false;
function toggleMenu() {
// ...
to
$(function() {
var isOpen = false;
$('.toggle-menu').on('click', toggleMenu);
function toggleMenu() {
// ...