Get a free trial // Grow your CSS skills // Land your dream job

image fading question

  • # November 25, 2009 at 7:35 pm

    I’m pretty new to jQuery so please bear with me on this…

    I’d like to fade the two images in the #content div one into another (one time only) when the page is loaded. What I want to do seems simple enough, so I’d like to avoid a plugin, if possible, and just have a short script do it for me.

    Here is the html:



    And here’s what I’m trying to do with jQuery (I’m sure this is quite horrible):

    $(document).ready(function() {



    The fadeOut of the first image seems to work fine, but then the second image just appears suddenly, without fading in.
    How can I reconfigure the jQuery script to achieve a smooth, simultaneous fadeIn/fadeOut of these two images?

    Many thanks in advance!!

    # November 26, 2009 at 4:25 pm

    I’m not a pro at Jquery, but here’s my guess:

    $(document).ready(function() {

    $(‘img#zoomedOut’).fadeOut(2500, function() {


    If I’m not mistaken, that will first fade out the first image, and once that is done, it will start fading in the second image.

    Let me know how that works.

    # November 27, 2009 at 7:24 am

    I guess Ashton is right… just check it out and let us know…

    # November 27, 2009 at 2:41 pm

    A friend of mine, who is a real jQuery ninja helped me out.

    This was his recommendation:

    1.Set the css of the second image to display:none
    2.Use the following jQuery functionality.


    setTimeout(crossFade, 3000);

    function crossFade(){

    It works like a charm! Thank you both for giving a hoot about my jQuery newbie issues…

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed