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>

来源

2012-07-06 guruje

首先，'＃animate'在哪里？接下来，淡出会改变元素的不透明度，但不会改变宽度，可以用'fadeOut（）'来完成。最后，不要忘记DOM ready handler。 – VisioN 2012-07-06 11:45:01

您的示例中没有#animate元素！

如果你改变你喜欢这个代码，它会工作得很好：

$("#fade").click(function() { 
    $("#fade").animate(
      {"width": "200px"}, 
      "fast"); 
});

jsFiddle

来源

2012-07-06 11:45:05 Teneff

不妨在回调中使用'$（this）'而不是让jQuery再次查找元素。 – Utkanos 2012-07-06 11:46:42

@Utkanos我知道，但我想让它工作在最小的变化 – Teneff 2012-07-06 11:47:23

谢谢你的回应。代码不起作用。你能提供完整的HTML吗？ – guruje 2012-07-06 12:08:26

任何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元素。这可能是问题的另一个原因，但上述问题仍然存在。]

来源

2012-07-06 11:45:06 Utkanos

可以提供完整的代码吗？因为我无法在资源管理器中检查 – guruje 2012-07-06 12:24:13

您使用的.animate调用不会淡入div，但会尝试为宽度更改设置动画。褪色块做到这一点：

$(document).ready(function() { 
    $("#fade").click(function() { 
     $(this).fadeOut("fast"); 
    }); 

    $("#fade").mouseout(function() { 
     $(this).fadeIn("fast"); 
    }); 
});

编辑：更新与包括鼠标的完整示例。

来源

2012-07-06 11:45:20 davidethell

请提供完整的代码吗？ – guruje 2012-07-06 12:23:22

@guruje，我已经更新了一个完整的例子。 – davidethell 2012-07-06 18:34:17

jquery淡入淡出效果不起作用

回答

相关问题