jQuery How do you get an image to fade in on load

Question

All I want to do is fade my logo in on the page loading  I am new today to jQuery and I can t managed to fadeIn on load please help  Sorry if this question has already been answered I have had a look and try to adapt other answers for different question but nothing seems to work and its starting to frustrate me    Thanks    Code     lt script type  text javascript  gt                                             function       load function               set the image hidden by default               logo   hide    fadeIn 3000                                                             lt  script gt                       lt link rel  stylesheet  href  challenge css   gt     lt title gt Acme Widgets lt  title gt              lt  head gt          lt body gt         lt div id  wrapper  gt         lt div id  header  gt        lt img id  logo  src  logo-smaller jpg    gt         lt  div gt         lt div id  nav  gt        navigation       lt  div gt         lt div id  leftCol  gt        left col       lt  div gt         lt div id  rightCol  gt           lt div id  header2  gt          header 2          lt  div gt           lt div id  centreCol  gt          body text          lt  div gt           lt div id  rightCol2  gt          right col          lt  div gt        lt  div gt        lt div id  footer  gt       footer       lt  div gt        lt  div gt     lt  body gt   lt  html gt

User · Answer

Simply set the logo s style to display hidden and call fadeIn  instead of first calling hide     document  ready function             logo   fadeIn  normal          lt img src  logo jpg  style  display none   gt

User · Answer

CSS3   jQuery Solution  I wanted a solution that did NOT employ jQuery s fade effect as this causes lag in many mobile devices   Borrowing from Steve Fenton s answer I have adapted a version of this that fades the image in with the CSS3 transition property and opacity  This also takes into account the problem of browser caching  in which case the image will not show up using CSS   Here is my code and working fiddle   HTML   lt img src  http   placehold it 350x150  class  fade-in-on-load  gt    CSS   fade-in-on-load       opacity  0      will-change  transition      transition  opacity  09s ease-out      jQuery Snippet      fade-in-on-load   each function        if   this complete              this  bind  load   function                    this  css  opacity    1                      else             this  css  opacity    1                What s happening here is the image  or any element  that you want to fade in when it loads will need to have the  fade-in-on-load class applied to it beforehand  This will assign it a 0 opacity and assign the transition effect  you can edit the fade speed to taste in the CSS   Then the JS will search each item that has the class and bind the load event to it  Once done  the opacity will be set to 1  and the image will fade in  If the image was already stored in the browser cache already  it will fade in immediately   Using this for a product listing page   This may not be the prettiest implementation but it does work well

User · Answer

The key is to use   window  load function     so we know the image is loaded  Hide the image via the css function then fade it in using fadeIn     function          window  load function            logo   css  visibility   visible   opacity  0   fadeIn 1000                Idea from  http   www getpeel com

User · Answer

To do this with multiple images you need to run though an  each   function  This works but I m not sure how efficient it is      img   hide       img   each  function          this  on  load   function                this  fadeIn

User · Answer

Using the examples from Sohnee and karim79  I tested this and it worked in both FF3 6 and IE6    lt script type  text javascript  gt        document  ready function                logo   bind  load   function        this  fadeIn  slow                 lt  script gt    lt img src  http   www gimp org tutorials Lite Quickies quintet hst big jpg  id  logo  style  display none   gt

User · Answer

window onload is not that trustworthy   I would use    lt script type  text javascript  gt        document  ready function                  logo   hide   fadeIn 3000            lt  script gt

User · Answer

I figure out the answer  You need to use the window onload function as shown below  Thanks to Tec guy and Karim for the help  Note  You still need to use the document ready function too    window onload   function        logo   hide   fadeIn 3000       function        div   load function        div   hide   fadeIn 750        It also worked for me when placed right after the image   Thanks

User · Answer

This thread seems unnecessarily controversial   If you really want to solve this question correctly  using jQuery  please see the solution below   The question is  jQuery How do you get an image to fade in on load    First  a quick note   This is not a good candidate for   document  ready     Why  Because the document is ready when the HTML DOM is loaded  The logo image will not be ready at this point - it may still be downloading in fact   So to answer first the general question  jQuery How do you get an image to fade in on load   - the image in this example has an id  logo  attribute       logo   bind  load   function        this  fadeIn          This does exactly what the question asks  When the image has loaded  it will fade in  If you change the source of the image  when the new source has loaded  it will fade in   There is a comment about using window onload alongside jQuery  This is perfectly possible  It works  It can be done  However  the window onload event needs a particular bit of care  This is because if you use it more than once  you overwrite your previous events  Example  feel free to try it       function SaySomething words        alert words     window onload   function      SaySomething  Hello       window onload   function      SaySomething  Everyone       window onload   function      SaySomething  Oh          Of course  you wouldn t have three onload events so close together in your code  You would most likely have a script that does something onload  and then add your window onload handler to fade in your image -  why has my slide show stopped working     - because of the window onload problem   One great feature of jQuery is that when you bind events using jQuery  they ALL get added   So there you have it - the question has already been marked as answered  but the answer seems to be insufficient based on all the comments  I hope this helps anyone arriving from the world s search engines

User · Answer

You have a syntax error on line 5       logo   hide    fadeIn 3000     Should be       logo   hide   fadeIn 3000

User · Answer

Like Sohne mentions  but I would add this      img   hide        img   bind  load   function        this  fadeIn          or      img   bind  load   function         this  css  opacity  0  visibility   visible    animate  opacity  1    slow

User · Answer

OK so I did this and it works  It s basically hacked together from different responses here  Since there is STILL not a clear answer in this thread I decided to post this     lt script type  text javascript  gt      document  ready function              logo   hide            logo   bind  load   function        this  fadeIn               lt  script gt    This seems to me to be the best way to go about it  Despite Sohnee s best intentions he failed to mention that the object must first be set to display none with CSS  The problem here is that if for what ever reason the user s JS is not working the object will just never appear  Not good  especially if it s the frikin  logo   This solution leaves the item alone in the CSS  and first hides  then fades it in all using JS  This way if JS is not working properly the item will just load as normal    Hope that helps anyone else who stumbles into this google ranked  1 not-so-helpful thread

User · Answer

Using Desandro s imagesloaded plugin   1 - hide images in css     content img        display none       2 - fade in images on load with javascript   var imgLoad   imagesLoaded   content    imgLoad on   progress   function  instance  image           image img  fadeIn

User · Answer

I tried the following one but didn t work        lt span style  display  none   id  doneimg  gt           lt img alt  done  title  The process has been complated successfully     src   Url Content    Content App Icons icos tick icon gif      gt       lt  span gt        lt script type  text javascript  gt              document  ready function                      doneimg   bind  load   function        this  fadeIn  slow                           lt  script gt    bu the following one worked just fine    lt script type  text javascript  gt            document  ready function                      doneimg   fadeIn  normal                 lt  script gt                lt span style  display  none   id  doneimg  gt                   lt img alt  done  title  The process has been complated successfully     src   Url Content    Content App Icons icos tick icon gif      gt               lt  span gt

[jquery] jQuery How do you get an image to fade in on load?

Examples related to jquery

Examples related to onload

Examples related to fadein