Question

I have a span element:

<span id="signInResult" style="border: 1px solid white;">html in here</span>

when the jquery ajax success fires I would like the span to immediately turn green and then fade back to the default white color:

success: function(msg){
  $("#signInResult").css('border-style', 'solid');
  $("#signInResult").css('border-color', 'green');
  $("#signInResult").fadeIn(300).css('border-color', 'white').fadeIn(300);
}

I have tried a number of variations of the fadeIn and fadeOut.. the current version above doesn’t seem to do anything…. best way to do this to get desire result? thanks

Answer 1

You might want to use animate. It changes the css properties given slowly to the given values over the specified timeframe. FadeIn/FadeOut only deal with opacity and display.

Try:

success:function(msg) {
    $("#signInResult").css('border-color', '#0f0').animate({'border-color': '#fff'}, 300);
}

Docs: http://api.jquery.com/animate/