JQuery fadeIn не работает

Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно:

стиль:

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

Разметка:

 <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
 });

Ответ 1

Если элемент не скрыт, никакого затухания не произойдет, вам нужно что-то вроде этого:

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

Вы можете попробовать здесь, также $() устарел в 1.4+, вы должны использовать $(document) или более короткую версию, вот так:

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

Альтернативой является предоставление элемента a display: none изначально, но это прерывается для JS-отключенных пользователей, или если ошибки JavaScript возникают, предотвращая выцветание, поэтому вы можете избегать этого подхода.

Ответ 2

добавьте display:none в ваш код css.

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

Ответ 3

Я бы склонен думать, что вам нужно, чтобы какое-то событие управлялось для fadin. см. рабочий пример здесь: http://jsfiddle.net/hPHPn/

Таким образом:

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

для некоторой простой разметки:

<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" />

Ответ 4

Недавно я сделал то же самое в своем приложении. В верхней части моего документа html у меня есть:

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

Часть, которая говорит src="advtemp3jquery.js, относится к моему внешнему файлу .js. Я считаю, что он не поддерживает код во внешнем файле.

script выполняет следующие действия:

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