0

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.

Brynn Tweeddale
  • 3
  • 1

1 Answers1

0

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).

Alex
  • 632
  • 3
  • 11
  • Still not really working because the image doesn't fade out and the div shows below all the images rather than in place of.. I'm probably doing something wrong but I'm not sure what. – Brynn Tweeddale Aug 16 '14 at 21:40
  • The code I provided was just an example to show you how things work. I don't know the exact structure of your site, but you could try changing `this` in the above code to something like "#main-image". In terms of the positioning of the paragraph, you'll have to play around with the CSS to make that work. jQuery can also change CSS attributes so you might try experimenting with that. – Alex Aug 16 '14 at 22:13