jQuery是否可以多次使用.fadeTo（）？

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

Eg:

$("#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)

Answer 2

您将不得不再次显示div：

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

Answer 3

Another way is to use opacity animation instead:

$("#warning").html("The value is too low!").css({
    color : 'red',
    opacity : 1
}).stop().animate({
    opacity : 0
}, 1000);

DEMO: http://jsfiddle.net/SDWmn/1/