jquery fadeIn が機能しない 質問する

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>

脚本:

 $().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);
});

代替案としては、要素にdisplay: none最初にしかしこれは、JS が無効なユーザーにとっては機能しなくなるか、JavaScript エラーが発生してフェードが妨げられる可能性があるため、このアプローチは避けた方がよいでしょう。

おすすめ記事