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:

    Code:

    backgroundImage
    zoomed

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

    Code:
    $(document).ready(function() {

    $(‘img#zoomedOut’).fadeOut(2500),
    $(‘img#zoomedIn’).fadeIn(2500);

    });

    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:

    Code:
    $(document).ready(function() {

    $(‘img#zoomedOut’).fadeOut(2500, function() {
    $(‘img#zoomedIn’).fadeIn(2500);
    });

    });

    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.

    Code:
    $(document).ready(function(){

    setTimeout(crossFade, 3000);

    function crossFade(){
    $(“#hp-image1″).fadeOut(2500);
    $(“#hp-image2″).fadeIn(2500);
    }
    });

    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.

*May or may not contain any actual "CSS" or "Tricks".