I'm having an issue with my HTML partial, main index.html, and external JQuery file. Even though the file is being loaded successfully (verified through an alert function), the JQuery functions are not executing as expected.
Upon checking the resources, I can confirm that the file has been properly loaded onto the website. What could be causing this unexpected behavior?
Here's a snippet from the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
...
</body>
</html>
Below is some content from home.html:
<div id="animate"><h1>This is animation.</h1></div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
...
</div>
In the animate.js file, we have the following script:
$(document).ready(function()
{
$("#animate").hide();
setInterval(function(){
$("#animate").fadeIn(1000);
},1000);
});