Question

有人可以告诉我我做错了什么：

式：

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

Answer 1

除非元素被隐藏，否则不会出现淡入淡出，你需要这样的东西：

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

You can give it a try here，$()在1.4+中已弃用，您应该使用$(document)或更短的版本，如下所示：

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

另一种方法是给元素display: none初始，但这对于已停用JS的用户来说是中断，或者如果发生JavaScript错误导致淡入淡出，那么你可能想要避开这种方法。

Answer 2

将display:none添加到您的css代码中。

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

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

Answer 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文件。我发现将代码保存在外部文件中比较简洁。

该脚本执行以下操作：

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

jquery fadeIn不工作

4 个答案: