CODEWITHSUNDEEP
jquery
ahto design
ahto design

Reputation: 85

Trying to have an image fade in on load

I'm trying to have an image fade in on load, but its not working.

HTML

<div class="carl-dair">
        <a href="pages/about.html"><img src="images/carl-dair.png"></a>
</div>

JQ

$(document).ready(function() { 
$('#carl-dair').load fadeIn("slow");
});

Any help would be appreciated since I'm a complete beginner at JS. Thanks!

Upvotes: 1

Views: 863

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

as I said in comment you used class="carl-dair" and used it as an Id in js $('#carl-dair') so change it to $('.carl-dair')

wrong way to use it like that

$(document).ready(function() { 
   $('#carl-dair').load fadeIn("slow");
});

try it like this

$(document).ready(function() { 
  $('.carl-dair img').on('load',function(){
     $(this).fadeIn("slow");
  });
});

be sure in css display it to none

.carl-dair img{
   display : none;
}

if in css you use

.carl-dair{
   display : none;
}

and want to show the #carl-dair div after image load you can use

   $(document).ready(function() { 
      $('.carl-dair img').on('load',function(){
         $(this).closest('.carl-dair').fadeIn("slow");
      });
    });

and no need to display image to none

something you should know

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

It doesn't work consistently nor reliably cross-browser It doesn't fire correctly in WebKit if the image src is set to the same src as before It doesn't correctly bubble up the DOM tree Can cease to fire for images that already live in the browser's cache

source https://api.jquery.com/load-event/

so instead of .load() .. use .on('load',function(){})

DEMO

Upvotes: 3

Related Questions