使用 JQuery 淡入和淡出 div答案

【问题标题】：Fade div in and out with JQuery使用 JQuery 淡入和淡出 div
【发布时间】：2015-12-15 06:42:32
【问题描述】：

我在这里疯了......

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

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

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

这就是我所做的......

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

它什么都不做。我看不出我做错了什么！

【问题讨论】：

它工作正常你有任何错误
尝试将jQuery 和<script> 放在body 的末尾。

标签： javascript jquery html css fade

【解决方案1】：

将您的 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 strong> 你的 Javascript 将运行 (Source)

在简单的页面上还可以，但在更复杂的场合会让人头疼。

【讨论】：

这个更适合我。
@Interactive 欢迎您。如果您还有任何问题，我可以进一步帮助您

【解决方案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');
    });
});
});

【讨论】：

没问题@Interactive，如果您认为我们的某个回答对您有帮助，请将其中一个标记为“已接受”以帮助其他用户并使网站未回答的问题倒计时。谢谢！

【解决方案3】：

它什么也不做，因为您将代码放在头部，并且您没有等待页面加载，并且当它执行时，选择器（例如$('#btn')）返回空对象。要么：

将代码移至</body>下方。
使用 jQuery“加载”处理程序 ($())。

【讨论】：