Recently, I added a couple of Jquery scripts in my header to handle the fading in of a specific CSS class and scrolling down another one. Both of these classes are initially set to display: none in CSS, with Jquery responsible for making them visible. Here is the code snippet:
<script src="../jquery.js"></script>
<script>
$(document).ready(function(){
$('.textbox').slideDown(2500);
});
</script>
<script>
$(document).ready(function() {
$('.logo').fadeIn(2500); });
</script>
Initially, everything was functioning as expected. However, after some recent changes on my website - particularly related to the menu bar - the scripts stopped running consistently. Upon investigation, I realized that removing display: none allowed the Jquery script to work properly again.
.textbox {
background: rgba(255, 255, 255, 0.88);
width: 80%;
height: auto;
float: none;
margin-right: auto;
margin-left: auto;
-moz-border-radius: 25px;
border-radius: 25px;
}
Can anyone provide insights into why the Jquery script fails to display my content? Would it be advisable to load JQuery from Google servers instead of hosting it myself?
UPDATE: I believe I have found a solution to the issue. It appears that the CSS was loading after the Jquery scripts had executed (or so I suspect), so I modified the first line of the Jquery scripts to:
$(window).load(function() {
This adjustment seems to have resolved the problem (at least temporarily). I wanted to share this note in case others encounter a similar issue in the future.