All geek questions in one place

JQuery does not receive a call in all browsers

Disclaimer: I am new to jQuery.

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

However, these effects only work in the Chrome browser (i.e. they will not work in Safari, FireFox, Opera), which puzzles me quite a bit. I tried to clear my cache if it stores the old file, but did none of this.

The main idea (stored in the 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 you click the div tag with the identifier videoThumbnail_XYZ it launches fadeOut and fadeIn calls of other div tags.

I upload javascript files to 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!

+4
source share
4 answers

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

The usual way to do this when using jQuery is to wrap your code as follows.

 $(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 the .ready() handler, which ensures that the DOM is loaded before your code runs.

If you are not using some means of providing DOM loading, 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> .

 <!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>
+3
source

If mainsite.js turned on before the div displayed, this may cause the browser to loop. Try wrapping this around your click handler setting:

 $(document).ready(function(){ // your function here });

This ensures that it will not start before the DOM is ready.

Alternatively, you might consider including fadeIn calls in your fadeOut callback function, so if you decide to change the duration later, you only need to change it in one place.

A way that would look like this:

 $("#thumbnailDescription_XYZ").fadeOut(300,function(){ $("#videoPlayer_XYZ").fadeIn(100); $("#videoHiddenOptions_XYZ").fadeIn(100); });
+2
source

While JavaScript provides a load event to execute code when rendering the page, this event does not fire until all assets, such as images, are fully received. In most cases, a script can be run as soon as the DOM hierarchy is fully built. It is guaranteed that a handler that passes before .ready() will be executed after the DOM , so this is usually the best place to attach all other event handlers and run other jQuery code.

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

All three of the following syntaxes are equivalent:

 * $(document).ready(handler) * $().ready(handler) (this is not recommended) * $(handler)
+1
source

I see that you have a delay set with the same duration as your fadeOut, I would recommend instead of a delay, which, in essence, expected the animation to complete this, instead you use the callback function.

 $("#videoThumbnail_XYZ").click(function () { $("#thumbnailDescription_XYZ").fadeOut(300, function() { $("#videoPlayer_XYZ").fadeIn(100); $("#videoHiddenOptions_XYZ").fadeIn(100); }); });
+1
source

Source: https://habr.com/ru/post/1335435/

More articles:


All Articles