jquery淡入淡出效果不起作用
下面的代码与Jquery不起作用。分裂并不是衰落。请帮助我jquery淡入淡出效果不起作用
<html>
<head>
<style type="text/css">
#fade{ background-color:#abc123; width:200px; height:30px; padding:3px; }
</style>
<SCRIPT type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></SCRIPT>
<script type="text/javascript">
$("#animate").click(function() {
$("#fade").animate(
{"width": "200px"},
"fast");
});
</script>
</head>
<body>
<div id="fade">Animate Text</div>
</body>
</html>
您的示例中没有#animate
元素!
如果你改变你喜欢这个代码,它会工作得很好:
$("#fade").click(function() {
$("#fade").animate(
{"width": "200px"},
"fast");
});
任何DOM引用jQuery的需要被封闭在文件准备好处理程序(DRH)。此外,你并没有淡化DIV,而只是在其尺寸上进行动画制作。
<script type="text/javascript">
$(document).ready(function() {
$("#animate").click(function() {
或者干脆
<script type="text/javascript">
$(function() {
$("#animate").click(function() {
...否则你试图跟DOM元素之前的DOM实际上是准备好了。
[编辑 - 正如其他答案已经指出,没有#animate
元素。这可能是问题的另一个原因,但上述问题仍然存在。]
可以提供完整的代码吗?因为我无法在资源管理器中检查 – guruje 2012-07-06 12:24:13
您使用的.animate调用不会淡入div,但会尝试为宽度更改设置动画。褪色块做到这一点:
$(document).ready(function() {
$("#fade").click(function() {
$(this).fadeOut("fast");
});
$("#fade").mouseout(function() {
$(this).fadeIn("fast");
});
});
编辑:更新与包括鼠标的完整示例。
请提供完整的代码吗? – guruje 2012-07-06 12:23:22
@guruje,我已经更新了一个完整的例子。 – davidethell 2012-07-06 18:34:17
首先,'#animate'在哪里?接下来,淡出会改变元素的不透明度,但不会改变宽度,可以用'fadeOut()'来完成。最后,不要忘记DOM ready handler。 – VisioN 2012-07-06 11:45:01