Question

I am trying to write a script so that every time a specific button is pressed, I want to send out a warning message in a div tag. I decided to use the fadeTo because my div tag is inside a table and I dont want it to collapse. However, it seems like after the first press, any subsequent press will not work anymore. Does anyone know a workaround for this?

Here’s my warning code:

$("#warning").html("The value is too low!").css('color','red').fadeTo(10000,0);

Answer 1

At the end of the fadeTo, the element’s opacity is 0. To re-start, reset the opacity back to 100, since otherwise it’s trying to animate from 0 to 0, which is…subtle to say the least. 🙂

E.g.:

$("#warning")
    .html("The value is too low!")
    .stop()            // <=== New bit: Stop the animation if it's running
    .css({
      'opacity': 1,    // <=== New bit: Reset the opacity
      'color': 'red'
    })
    .fadeTo(10000,0);

Live example | source (uses one second rather than ten)