CODEWITHSUNDEEP
jqueryfadein
Juliana Marguerite Linder
Juliana Marguerite Linder

Reputation: 133

Simple JQuery .fadeIn event not working correctly on my browser

I'm new to JQuery and trying out some basic events.

I used the fadeIn event on my website under construction page (my website

The code I'm using is as follows, applying only to the three present selectors: 

$(document).ready(function(){

$('#logo').fadeIn(3000);
$('#heading').delay(2000).fadeIn(3000);
$('#tagline').delay(1000).fadeIn(3000);

});

While my boyfriend says it works in his Chrome browser every single time he refreshes, it doesn't always work in mine. Sometimes the image appears, sometimes it doesnt. Sometimes it works perfectly, sometimes it doesn't.

Could this be my internet connection? Or is it my code?

I'm new to this so any help would be greatly appreciated!! Thanks in advance.

Juliana

Upvotes: 1

Views: 665

Answers (2)

Kevin B
Kevin B

Reputation: 95047

Most likely the images aren't done loading or simply don't load in some cases, which causes them to just appear rather than fading in because they were not visible when the fadeIn occurred. To avoid this, make sure they are first loaded by using the window load event.

$(window).load(function(){
  // do stuff
});

Upvotes: 2

DigTheDoug
DigTheDoug

Reputation: 1440

I'll keep this answer here, but the more obvious and much easier non-overkill method would likely be what @Kevin B suggested in the comments above and using $(window).load() which waits for all page content to be loaded as well instead of $(document).ready() which waits only for the HTML DOM to be loaded.

What you probably want to do is ensure that the image has been loaded before you try and fade it in. If it's not loaded when the page is finished being rendered and your JS runs, it will not show up. Then you will refresh the browser and it will work that time.

Try this:

$(document).ready(function(){

    $("#logo img").bind("load", function () { 
        if(!$("#logo").is(":visible")) {
             $('#logo').fadeIn(3000);
        }
    });

    $('#logo').fadeIn(3000);
    $('#heading').delay(2000).fadeIn(3000);
    $('#tagline').delay(1000).fadeIn(3000);

​});

What you're doing is first saying that as soon as the image has finished loading, and if it hasn't already been made visible, fade it in. But the problem with that is if the image has already been downloaded before, this won't ever actually fire. So you need to have the normal fadein() below it that always runs as well.

The main problem with this is your timing will be off unless (possibly only by < 1 second) unless you want to halt all animations until the image has been loaded for sure.

Here's a fiddle to play around with

Upvotes: 2

Related Questions