Div不会淡出/淡入
[英]Div won't fade out/fade in
问题描述
I am trying to get a div to fade out and in on button click. 
我正在尝试使div淡出并单击按钮。 It works on jfiddle but for some reason it is not working on my asp.net page: 它可以在jfiddle上运行，但是由于某种原因，它无法在我的asp.net页面上运行：
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
<div><a href="#" id="btn">fade div</a></div>
<div id="fancy">Fancy Div</div>
http://jsfiddle.net/3XwZv/1859/ http://jsfiddle.net/3XwZv/1859/
my asp.net page: 我的asp.net页面：
<html>
<head>
<script type="text/javascript" src="../javascript/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../javascript/jquery-ui.js"></script>
<script type="text/javascript" class="init">
$('#btn').click(function (e) {
$('#fancy').fadeOut('slow', function () {
$('#fancy').fadeIn('slow');
});
});
</script>
</head>
<body>
<div><a href="#" id="btn">Fade div</a></div>
<div id="fancy">Fancy Div</div>
</body>
</html>
3 个解决方案
解决方案1
3 已采纳 2014-06-30 22:05:26
If you put your jQuery code inside the head section and try to manipulate the DOM elements it won't work as at that time your HTML document isn't loaded yet. 如果将jQuery代码放在开头部分，并尝试操作DOM元素，那么该元素将无法正常工作，因为那时您的HTML文档尚未加载。 So you have two ways to resolve this issue. 因此，您有两种方法可以解决此问题。
First : Use $(document).ready() function and put your code inside it. 首先 ：使用$（document）.ready（）函数并将代码放入其中。 So whenever your document is ready, $(document).ready() event will be fired. 因此，无论何时准备好文档，都会触发$（document）.ready（）事件。
$(document).ready(function () {
$('#btn').click(function (e) {
$('#fancy').fadeOut('slow', function () {
$('#fancy').fadeIn('slow');
});
});
});
Second : Put your jQuery code at bottom of your page. 第二 ：将jQuery代码放在页面底部。
解决方案2
0 2014-06-30 21:57:00
Can you share the page you have this implemented on? 您可以共享实施了该页面的页面吗？ Hard to know what's going wrong without seeing the failing code. 在不看到失败代码的情况下很难知道出了什么问题。 My first guess would be that jQuery isn't running on your page. 我的第一个猜测是jQuery没有在您的页面上运行。
In the meantime, you could try throwing a log inside of your click function to see if that's firing. 同时，您可以尝试在您的click函数中添加一个日志，以查看是否触发了该日志。
$('#btn').click(function(e){
console.log('Click fired');
$('#fancy').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
解决方案3
0 2014-06-30 22:09:47
Looks like you may have not done the binding: try this code 看起来您可能尚未完成绑定：请尝试以下代码
$(function(){
$('#btn').click(function(e){
console.log('Click fired');
$('#fancy').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.