theme development – jQuery Snippet Not Working on WordPress Site

Question

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.

0
agon024 2 months 2023-01-30T14:19:05-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse