jquery fadeIn not working

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

style:

.warn开发者_StackOverflow中文版ing{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
 });

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.

add display:none to your css code.

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

I would tend to think you want some event to be managed for the fadin. see working example here: http://jsfiddle.net/hPHPn/

Thus:

$(document).ready(function(){
    $(".warning").hide();// hide it initially
    $('#unhideit').click(function(){
        $(".warning").fadeIn(4000);                            });
});

for some simple markup:

<p class="warning">A successful authorization already exists  
    for this Quote ID. Further authorizations are not allowed at this time.</p> 
<input type="button" id="unhideit" value="clickme" />

I have recently done the same thing in my application. At the top of my html document I have:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="advtemp3jquery.js"></script>

The part which says src="advtemp3jquery.js refers to my external .js file. I find it neater to keep the code in an external file.

The script does the following:

$(document).ready(function() {
    $('.header1,.header2').fadeIn('4000');
});