Question

我正试图让div淡出并按下按钮。它适用于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/

我的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>

Answer 1

如果你把你的jQuery代码放在head部分并尝试操作DOM元素，它就不会工作，因为那时你的HTML文档还没有被加载。因此，您有两种方法可以解决此问题。

首先：使用 $（document）.ready（）函数并将代码放入其中。因此，只要文档准备就绪，就会触发 $（document）.ready（）事件。

$(document).ready(function () {
    $('#btn').click(function (e) {
        $('#fancy').fadeOut('slow', function () {
            $('#fancy').fadeIn('slow');
        });
    });
});

第二：将您的jQuery代码放在页面底部。

Answer 2

您可以分享您实施的网页吗？没有看到失败的代码很难知道出了什么问题。我的第一个猜测是jQuery没有在你的页面上运行。

与此同时，您可以尝试在click函数中放入一个日志，看看是否会触发。

$('#btn').click(function(e){    
    console.log('Click fired');
    $('#fancy').fadeOut('slow', function(){
       $('#fancy').fadeIn('slow');
    });
});

Answer 3

看起来你可能还没有完成绑定：试试这段代码

$(function(){
  $('#btn').click(function(e){    
    console.log('Click fired');
    $('#fancy').fadeOut('slow', function(){
       $('#fancy').fadeIn('slow');
    });
});
}

Div不会淡出/淡出

3 个答案: