Home/ Questions/Q 3678982
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T03:24:20+00:00

Disclaimer: I am new to jQuery. I am trying to implement a fadeOut effect

  • 0

Disclaimer: I am new to jQuery.

I am trying to implement a fadeOut effect in jQuery for a div block, and then fadeIn effect on two other div blocks.

However, these effects are only working in the Chrome browser (i.e. they won’t work in Safari, FireFox, Opera) which is rather perplexing to me. I have tried clearing my cache in case it was storing an old file, but none of that seemed to do anything.

Basic idea (stored in mainsite.js file):

$("#videoThumbnail_XYZ").click(function () {
  $("#thumbnailDescription_XYZ").fadeOut(300);
  $("#videoPlayer_XYZ").delay(300).fadeIn(100);
  $("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
  });

So when a div tag with the id of videoThumbnail_XYZ is clicked, it starts the fadeOut and fadeIn calls on the other div tags.

I am loading my javascript files into the page in this order (so jQuery is loaded first):

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script async="" type="text/javascript" src="javascripts/mainsite.js"></script>

Any guidance you could give is greatly appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Make sure the DOM is fully loaded before your code runs.

    A common way of doing this when using jQuery is to wrap your code like this.

    $(function() {
    $("#videoThumbnail_XYZ").click(function () {
      $("#thumbnailDescription_XYZ").fadeOut(300);
      $("#videoPlayer_XYZ").delay(300).fadeIn(100);
      $("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
    });
});

    This is a shortcut for wrapping your code in a .ready() handler, which ensure that the DOM is loaded before your code runs.

    If you don’t use some means of ensuring that the DOM is loaded, then the #videoThumbnail_XYZ element may not exist when you try to select it.

    Another approach would be to place your javascript code after your content, but inside the closing </body> tag.

    <!DOCTYPE html>
<html>
    <head><title>your title</title></head>
    <body>
        <!-- your other content -->

        <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
        <script async="" type="text/javascript" src="javascripts/mainsite.js"></script>  
    </body>
</html>
    • 0