Click a link that fades out an image + fades in text

Question

I've been researching this for hours, and I can't get any to work with my coding.

Here is what I have so far: http://brynntweeddale.com/

I want to be able to make ABOUT into a link and click it to replace the image with text, preferably with the image fading out and text fading in.

I want to be able to do this with each link though. I see this on websites all the time, but I just can't figure it out! I'm new to all of this, as well.

Thanks in advance.

Answer 1

It sounds like you need to use jQuery. jQuery is a Javascript library that let's you do things like animations very easily. Using jQuery, you could do something like:

$("#about-link").click(function() { //when "about-link" is clicked, call this function

    $(this).fadeOut(500, function() { //fade out for 500ms, then call this function

        $("#about-paragraph").fadeIn(500);  //fade in the paragraph for 500 ms

    });

});

You can find the full jQuery documentation here and a beginner tutorial on javascript here (if you need it).