用 JQuery 淡入淡出 div

Question

我在这里失去了理智.....

我想在同一页面上淡入和淡出 div。我不知道 JQuery 所以我开始搜索我想要的东西。

我找到了 this。它完全符合我的要求（在 Fiddle 中）。

所以我开始复制和其他东西，但我就是不会工作

这是我所做的....

在我的 <head> 中，我添加了 JQuery 和 CSS 样式

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$('#btn').click(function(e){    
    $('#fancy, #btn').fadeOut('slow', function(){
        $('#bank, #btn-bk').fadeIn('slow');
    });
});

$('#btn-bk').click(function(e){    
    $('#bank, #btn-bk').fadeOut('slow', function(){
        $('#fancy, #btn').fadeIn('slow');
    });
});
</script>
<style>
#bank {display:none;}
#btn-bk {display:none;}
</style>

在正文中我放置了 HTML

<div><a href="#" id="btn">Show bank div and hide fancy div</a></div>
<div id="btn-bk"><a href="#">back</a></div>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>

它什么都不做。我不明白我做错了什么！

男.

Answer 1

它什么都不做，因为你把代码放在了头部，你没有等待页面加载，当它执行时，选择器（例如 $('#btn')）return空对象。或者：

将您的代码移至下方 </body>。
使用 jQuery "on load" 处理程序 ($())。

Answer 2

一个区别是它们的方法是在 jquery onload 方法中定义的。当 JQuery 尝试绑定到元素时，它们实际上还不存在！尝试像这样包装你的 Javascript...

$(window).load(function(){
$('#btn').click(function(e){    
    $('#fancy, #btn').fadeOut('slow', function(){
        $('#bank, #btn-bk').fadeIn('slow');
    });
});

$('#btn-bk').click(function(e){    
    $('#bank, #btn-bk').fadeOut('slow', function(){
        $('#fancy, #btn').fadeIn('slow');
    });
});
});

Answer 3

将您的 JS 代码包装在 document.ready 语句中：

$(function () {
    $('#btn').click(function(e){
        $('#fancy, #btn').fadeOut('slow', function(){
            $('#bank, #btn-bk').fadeIn('slow');
        });
    });

    $('#btn-bk').click(function(e){
        $('#bank, #btn-bk').fadeOut('slow', function(){
            $('#fancy, #btn').fadeIn('slow');
        });
    });
});

它实际上会做什么，它会等到您的 文档对象模型 (DOM) 准备好执行 Javascript。

您可以使用 $(window).load({})，但在这种情况下，您的整个页面（包括图像和 iframe）将被完全下载, 只有 THEN 你的 Javascript 会运行 (Source)

在简单的页面上还好，但在比较复杂的场合就让人头疼了。

用 JQuery 淡入淡出 div

Fade div in and out with JQuery

javascript

jquery

html

css

fade