使用JQuery淡入和淡出div

debugcn 发表于 Dev

交互的

我在这里迷失了方向.....

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

我发现了这个。它确实完成了我想要的操作（在小提琴中）。

所以我开始复制和填充东西，但是我只是不工作

这是我做的...

我在其中<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>

它什么也没做。我看不到我在做什么错！

call

一个区别是它们的方法是在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');
    });
});
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。