jQuery的淡入不工作
是否有人可以告诉我,我做错了什么:jQuery的淡入不工作
风格:
.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
});
除非元素被隐藏,否则不会出现淡化,您需要这样做mething这样的:
$(".warning").hide().fadeIn(4000);
You can give it a try here,也$()
被弃用1.4+,你应该使用$(document)
或较短的版本,像这样:
$(function() {
$(".warning").hide().fadeIn(4000);
});
另一种方法是给元素的display: none
开始但是对于JS禁用的用户来说这会中断,或者如果JavaScript错误发生阻止淡入淡出,那么您可能需要避开此方法。
那正是错误!谢谢! – 2010-08-03 18:13:10
正是我在找...真棒... – NiK 2012-08-27 23:05:38
正确! @nick carver这就是我想要的 – Shrivallabh 2015-02-19 11:59:09
将display:none
添加到您的css代码中。
.warning{border: 1px solid #F0AAAA; background:#FFBABA; color: #C90000;display:none}
谢谢你的回应! 由于上述响应中指出的缺陷,我避免了这种解决方案。 – 2010-08-03 18:14:32
我会倾向于认为你想要一些事件来管理的法丹。看到这里的工作例如: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" />
我最近做了同样的事情在我的应用程序。在我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');
});
你在期待淡入()做什么?如果.warning不可见,fadeIn将使其可见,但根据您的CSS,没有理由期望它被隐藏。 – 2010-08-03 17:10:35
我的情况是,当页面加载时,无论如何都会显示警告div。我只是想在用户登陆该页面后慢慢淡化它。所以我不想在样式表中设置display:none。但正如Nick在下面提到的.hide()。fadeIn()正是我在这种情况下所需要的。 – 2010-08-03 18:28:55