Question

I had some help with understanding how I can animate some text using jQuery. One of the users suggested I use the .fadeIn() function. When I look at this it looks like it meets my needs but I have a question:

Here’s what I have now:

if (correct == "true") {
   $('#ft2').html('Correct');
   $('#ft2').css('color', 'Green')
   $('#ft2').css('border-color', 'Green')
} else {
   $('#ft2').html('Incorrect');
  $('#ft2').css('color', 'Red')
  $('#ft2').css('border-color', 'Red')
}

Same as from my last question. Now I would like to first set the opacity of the color and border to invisible and then fade in the css color and border-color properties to the new color both at the SAME time. Is it possible to make .fadeIn() fade in more than one thing at once? Has anyone tried doing this?

Thanks again for all the help already provided to me

Answer 1

fadeIn will fade in the entire element (all its parts, including the border, background color, foreground color, etc.), not just individual bits of it. fadeIn and fadeOut work by modifying the opacity of the element as a whole. So this concept of fading in individual aspects of an element doesn’t apply to fadeIn and fadeOut.

If you want to go the fadeout/fadein way, and you really want it to take a full second as you said in your previous question (which seems like a really long time) here’s how:

var color, text;

if (correct == "true") { // Do you really mean to compare to a string here?
    text = 'Correct';
    color = 'green';
}
else {
    text = 'Incorrect';
    color = 'red';
}

$('#ft2').fadeOut(500, function() {
    $(this).text(text).css({
        'color': color,
        'border-color': color
    }).fadeIn(500);
});

Gratuitous live example

That fades out the element with its current content (taking half a second; 500ms), and when the fadeout is complete changes the content and color, then fades it back in across another half second (500ms). You could weight those differently, fade out in 250ms and then fade in over 750ms, although I’d suggest using a shorter overall time.

But I think I’d probably go with one of the color plugins one of the people answering your previous question pointed you to.