0

So I found this awesome article about fading between images using javascript (using opacity, which works in Mozilla, Opera, and IE): http://www.cryer.co.uk/resources/javascript/script19_fade_image.htm#self

And I'm wondering, can I do the same with text? I mean, if both images have some text inside them, and I want the fade to happen at the same time with text?

Thanks

knocte
  • 16,941
  • 11
  • 79
  • 125
  • 1
    Yes, you can. I should also note that jQuery wraps this behavior up into a nice convenient package, meaning you can use the same code for all your browsers. If it is an option for you, I recommend checking it out. – Brad Aug 25 '12 at 20:13
  • 2
    When you say "images have some text inside them", do you mean the text is part of the image or do you mean you have a separate object near the image that is text? – jfriend00 Aug 25 '12 at 20:23
  • this question seems odd.. have you tried just using the exact same method on the text or not? – Alex Aug 25 '12 at 20:55
  • jfriend00: if the text was part of the image, my question would not make any sense – knocte Aug 25 '12 at 21:07

1 Answers1

1

Here's an example of how to fade between two images, and text, using JQuery:

http://jsfiddle.net/Tr2LA/

Click the image to begin the animation. It works by using JQuery to fade out one div while simultaneously fading in another. Each div contains an image and text.

$('#fadeOut').click(function() {

  $('#fadeOut').fadeOut('slow');

  $('#fadeIn').fadeIn('slow');

});
Greg Ross
  • 3,479
  • 2
  • 27
  • 26
  • 3
    Better (fades back and forth, text centered, padding, cleaner code): http://jsfiddle.net/mnfyz/2 – Ashley Strout Aug 25 '12 at 22:33
  • This is brilliant, thanks D.Strout and Greg! For how long dos jsfiddle retain this mockups? – knocte Aug 26 '12 at 10:50
  • You're welcome :) According to this, JSFiddle will host the examples forever: http://stackoverflow.com/a/8191278/1010138. Btw, nice code update, D. Strout. – Greg Ross Aug 26 '12 at 19:06