jquery fadeIn not working

Question

Can someone please tell me what I'm doing wrong:

style:

.warning{border: 1px solid #F0AAAA; background:#FFBABA; color: #C90000;} 

markup:

 <p class="warning">A successful authorization already exists.                      Further authorizations are not allowed at this time.</p> 

script:

 $().ready(function () {      alert($(".warning").html());     // WORKS      $(".warning").fadeIn(4000);      // DOESN'T WORK  }); 

Answer 1

Unless the element is hidden, no fade will occur, you need something like this:

$(".warning").hide().fadeIn(4000); 

You can give it a try here, also $() is deprecated in 1.4+, you should use $(document) or the shorter version, like this:

$(function() {   $(".warning").hide().fadeIn(4000); }); 

The alternative is to give the element a display: none initially but this breaks for JS-disabled users, or if JavaScript errors occur preventing the fade, so you may want to steer clear of this approach.