DIV不会淡出/淡入 [英] Div won't fade out/fade in
问题描述
我想获得一个div淡出并在按钮的点击。它适用于jfiddle但由于某种原因它不工作我的asp.net页面上：
$（'＃BTN'）。点击（函数（五）{
$（'＃看中'）。淡出（'慢'，函数（）{
$（'＃看中'）淡入（慢）。
}）;
}）;＆LT; DIV＆GT;＆LT; A HREF =＃ID =BTN＆GT;褪色DIV＆LT; / A＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =花哨＆GT;花式事业部＆LT; / DIV＆GT;
http://jsfiddle.net/3XwZv/1859/
我的asp.net页面：
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =../的JavaScript / jQuery的-2.1.1.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =../的JavaScript / jQuery的-ui.js＆GT;＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的阶级=初始化＆GT;
$（'＃BTN'）。点击（函数（五）{
$（'＃看中'）。淡出（'慢'，函数（）{
$（'＃看中'）淡入（慢）。
}）;
}）;
＆LT; / SCRIPT＆GT;＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV＆GT;＆LT; A HREF =＃ID =BTN＆GT;淡出DIV＆LT; / A＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =花哨＆GT;花式事业部＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
如果你把你的jQuery code头部分内，并试图操纵DOM元素也不会因为在那个时候你的HTML文档ISN工作T装呢。所以，你有两种方法来解决这个问题。
第一：使用的 $（文件）。就绪（）的功能，把你的code里面。因此，只要你的文件已经准备好， $（文件）。就绪（）的事件将被解雇。
$（文件）。就绪（函数（）{
$（'＃BTN'）。点击（函数（五）{
$（'＃看中'）。淡出（'慢'，函数（）{
$（'＃看中'）淡入（慢）。
}）;
}）;
}）;
二：把你的jQuery code在页面底部。
I am trying to get a div to fade out and in on button click. It works on jfiddle but for some reason it is not working on my asp.net page:
$('#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/
my asp.net page:
<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>
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. So you have two ways to resolve this issue.
First : Use $(document).ready() function and put your code inside it. So whenever your document is ready, $(document).ready() event will be fired.
$(document).ready(function () {
$('#btn').click(function (e) {
$('#fancy').fadeOut('slow', function () {
$('#fancy').fadeIn('slow');
});
});
});
Second : Put your jQuery code at bottom of your page.
这篇关于DIV不会淡出/淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
