theme development – jQuery Snippet Not Working on WordPress Site
WordPress Version – 6.3.1
Theme – JointsWP (blank starter theme)
jQuery Version – 6.3.3 (tried 6.3.1 also)
Website Link – https://www.labellajewelrydesigns.com
I seem to be having a problem on my WordPress site. When running a jquery script in codepen.io everything functions properly. I AM using this code snippet on another site that I have designed years ago and it works fine using jQuery 6.3.1 but When running that code through my website it is not function properly at all.
Code snippet in question:
jQuery(document).ready(function( $ ){
$('.mobileBtn').click(function(){
if( $('.mobileNav').hasClass('animate__zoomIn') ){
$('.mobileNav').removeClass('animate__zoomIn').addClass('animate__zoomOut');
$('.mobileBtn').removeClass('btnActive');
setTimeout(function () {
$('.mobileNav').css({display: 'none'}).removeClass('animate__zoomOut')
},1000 );
// alert('1');
}
else{
$('.mobileNav').css({display: 'block'}).addClass('animate__zoomIn');
$('.mobileBtn').addClass('btnActive');
// alert('2');
}
});
});
When I load this up on codepen.io (https://codepen.io/agon024/pen/KKBxNwx) it functions like it should.
I have disabled all the plugins and it still does it. I have removed all other jQuery from the script and it still does it. I have tried using “jQuery” instead of “$” and nothing. I am using this starter theme on another site and it doesn’t have a problem.
IMPORTANT –
If I uncomment the “alert” lines I see that it is looping through the “if” and “else” statements without stopping. When I click “mobileBtn” it adds the class “animate__zoomIn” and pops up an alert saying “2” then when I click OK on the alert it instantly removes the class “animate__zoomIn” and adds the class “animate__zoomOut”, sets the inline style to “display: none” after 1000ms and pops up an alert saying “1” and when I click OK it stops.
Anyone know what is going on? Like I said it seems to be looping throught the “if” and “else” statements even when the “else” condition is met. This is the first time I have encountered this and seeing as it works on codepen it must have something to do with WordPress.
Leave an answer