Cannot get jQuery to work in Hugo

support
1

This is how I usually handle smooth page transitions, but for some reason it doesn’t work in Hugo. To be more specific, it sometimes works, and sometimes doesn’t, and I can’t figure out why.

As you navigate between different pages, some of them reset smoothly, some don’t, and there doesn’t seem to be a pattern…

As always, your feedback is much appreciated!!!

Base of

<script>
$('#main').addClass('fade-out');
</script>

Individual pages

</script>
$(document).ready(function () {
   $('#main').removeClass('fade-out');
});
</script>

CSS

.fade-out {
opacity: 0;
}
#main, #main.fade-out {
transition: all 200ms ease-in-out;
}

I also tried binding ‘myfun()’ to onClick nav events, but it didn’t help. I must be doing something fundamentally wrong or dumb :wink:

function myfun() { 
  $('#main').addClass('fade-out');
  $(document).ready(function () { 
     $('#main').removeClass('fade-out'); 
  });
}
2

Hello your Tips & Tricks is really OT here since it is about jQuery and CSS.

This the Hugo Support Forum. Please stay on topic.

Right I see. You cannot get this to work. First of all this is a Support question not a Tips & Tricks. Also I have changed the title of the topic to reflect the issue in question.

Hugo is agnostic when it comes to CSS and jQuery.

But you need to use proper templates. It’s difficult to say why this doesn’t work without seeing the project in question.

Please have a look at the Requesting Help guidelines.

5

Like @alexandros mentioned, this isn’t a Hugo question but, you have a closing script tag where your opening script tag should be, in the individual page snippet.

In my opinion, check your browser’s js console to see what is going on, then edit the correct template to get your js working. Hugo will just assemble your site how you tell it.