欢迎您来到Ganace 的个人博客。
在茫茫互联网的海洋里能够遇见您，实在是一份不小的幸运。
诚挚地向您问候一声:您好，朋友！
这里是属于Ganace个人的隐秘小空间，记录了工作学习中遇到的知识点与灵感，以及生活中的碎碎念与吐槽、突如其来的中二病、尬尬的文艺时间、锻炼腹肌的时刻、惊喜的小发现等等。
想要在自己的平淡无奇的人生长河中留下些什么，
或者只是为了拯救老人家岌岌可危的记忆力，
仅此而已。
来到此地，分享与你。
也期待与您的再次相遇！
有任何的分享或者建议与吐槽，都可以Email我：ganace@foxmail.com
欢迎您的来信！
这里是一篇Ganace记录的关于jQuery的显示隐藏&淡入淡出&滑入滑出的文章。
这个需要用jQuery的相关对象来处理AJAX简化代码：
jQuery元素的显示/隐藏/切换主要用到以下三个个方法：
$(selector).show(speed,callback);
$(selector).hide(speed,callback);
$(selector).toggle(speed,callback);: `speed`参数规定显示/隐藏的速度，可选参数为"slow"、"fast"、或者毫秒数。
: `callback`参数规定显示/隐藏效果显示完成后所执行的js函数。
body标签中代码如下：
<button class="show" type="button">显示</button>
<button class="hide" type="button">隐藏</button>
<button class="toggle" type="button">切换</button>
<div class="card" style="width: 12.5rem;height: 13.75rem;background-color: aquamarine;"></div>
<div class="card" style="width: 12.5rem;height: 13.75rem;background-color: brown;"></div>jq代码如下：
<script type="application/javascript">
$(function(){
$('.show').click(function(){
$('.card').show();
});
$('.hide').click(function(){
$('.card').hide();
});
$('.toggle').click(function(){
$('.card').toggle();
});
})
</script>jQuery元素的淡入/淡出/切换/渐变至透明值主要用到以下四个个方法：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);: `speed`参数规定显示/隐藏的速度，可选参数为"slow"、"fast"、或者毫秒数。
: `callback`参数规定显示/隐藏效果显示完成后所执行的js函数。
: `opacity`参数是必须参数，规定渐变效果最终的透明度值。
body标签中代码如下：
<button class="fadeIn" type="button">淡入</button>
<button class="fadeOut" type="button">淡出</button>
<button class="fadeToggle" type="button">切换</button>
<button class="fadeTo" type="button">渐变至透明值0.6</button>
<div class="card" style="width: 12.5rem;height: 13.75rem;background-color: aquamarine;"></div>
<div class="card" style="width: 12.5rem;height: 13.75rem;background-color: brown;"></div>jq代码如下：
<script type="application/javascript">
$(function(){
$('.fadeIn').click(function(){
$('.card').fadeIn();
});
$('.fadeOut').click(function(){
$('.card').fadeOut();
});
$('.fadeToggle').click(function(){
$('.card').fadeToggle();
});
$('.fadeTo').click(function(){
$('.card').fadeTo('slow',0.6);
});
})
</script>body标签中代码如下：
<button class="fadeIn" type="button">逐个淡入</button>
<button class="fadeOut" type="button">逐个淡出</button>
<div>
<div class="card" style="width: 12.5rem;height: 13.75rem;background-color: aquamarine;"></div>
<div class="card" style="width: 12.5rem;height: 13.75rem;background-color: brown;"></div>
</div>jq代码如下：
<script type="application/javascript">
$(function(){
$('.fadeIn').click(function(){
$('.card:first').fadeIn('fast',function(){
$(this).next().fadeIn('fast',arguments.callee);
});
});
$('.fadeOut').click(function(){
$('.card:last').fadeOut('fast',function(){
$(this).prev().fadeOut('fast',arguments.callee);
});
});
})
</script>body标签中代码如下：
<button class="slideDown" type="button">逐个滑入</button>
<button class="slideUp" type="button">逐个滑出</button>
<button class="slideToggle" type="button">逐个切换</button>
<div>
<div class="card" style="width: 12.5rem;height: 13.75rem;background-color: aquamarine;"></div>
<div class="card" style="width: 12.5rem;height: 13.75rem;background-color: brown;"></div>
</div>jq代码如下：
<script type="application/javascript">
$(function(){
$('.slideDown').click(function(){
$('.card:first').slideDown('fast',function(){
$(this).next().slideDown('fast',arguments.callee);
});
});
$('.slideUp').click(function(){
$('.card:last').slideUp('fast',function(){
$(this).prev().slideUp('fast',arguments.callee);
});
});
$('.slideToggle').click(function(){
$('.card').slideToggle();
});
})
</script>