.hide()和.show()函数的默认效果是立刻执行响应的动作，没有任何动画效果。如果向它们的括号内传入时间参数，它们会在指定的时间长度内完成动作，就会产生动画效果。

$(document).ready(function () {
    $('a.hide').click(function () {
        $('p').hide('slow');
        return false;
    });
    $('a.show').click(function () {
        $('p').show('fast');
        return false;
    });
});

以上代码中，分别向.hide()函数传入了“slow”字符串，向.show()函数传入了“fast”字符串。这两个参数都是jQuery的预设速度参数。其中，“slow”代表600毫秒（0.6秒）；“fast”代表200毫秒（0.2秒）。

设置参数后，.hide()函数会在600毫秒的时间跨度内，同时减少元素的高度、宽度和不透明度，到600毫秒时，元素正好完全消失。.show()函数则会在200毫秒的时间跨度内，同时增加元素的高度、宽度和不透明度，到200毫秒时，元素正好完全显示。

如果要进行更精确的时间控制，可以直接使用毫秒数值，而且该数值不需要使用引号括起来。

$(document).ready(function () {
    $('a.hide').click(function () {
        $('p').hide(1234);
        return false;
    });
    $('a.show').click(function () {
        $('p').show(4321);
        return false;
    });
});

以上代码中，.hide()函数会在1234毫秒的时间跨度内完成隐藏动作；.show()函数则会在4321毫秒的时间跨度内完成显示动作。

jQuery的淡入淡出效果函数是.fadeIn()与.fadeOut()函数。

它们的功能很简单：.fadeIn()函数就是逐渐地增大元素不透明度（即逐渐显现出来），直至完全显示；而fadeOut()函数与此正相反，它是逐渐的减少元素不透明度（即逐渐的淡去），直至完全消失。

HTML代码如下：

<p>Hello everybody!</p>
<a href="#" class="hide">hide</a>
<a href="#" class="show">show</a>
<a href="#" class="fadeIn">fadeIn</a>
<a href="#" class="fadeOut">fadeOut</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    $('a.hide').click(function () {
        $('p').hide(1000);
        return false;
    });
    $('a.show').click(function () {
        $('p').show(1000);
        return false;
    });
    $('a.fadeIn').click(function () {
        $('p').fadeIn(1000);
        return false;
    });
    $('a.fadeOut').click(function () {
        $('p').fadeOut(1000);
        return false;
    });
});

以上代码中，分别使用了.hide()、.show()、.fadeIn()和.fadeOut()函数。

• .show()与.fadeIn()的区别是：.show()函数同时逐渐增大元素的高度、宽度和不透明度；.fadeIn()函数先立刻把元素设置为最终的高度和宽度，再逐渐增大不透明度。

• .hide()与.fadeOut()的区别是：.hide()函数同时逐渐减少元素的高度、宽度和不透明度；.fadeOut()函数先减少元素不透明度，高度和宽度不变，当元素完全透明时，立刻将元素的高度和宽度设为0，其实是将display设为“none”。

上面的.fadeIn()与.fadeOut同样使用了时间参数，它们会在1000毫秒（1秒）中完成动作。

jQuery另外一种基本的动画效果是滑上和滑下，对应的函数是.slideUp()和.slideDown()。

.slideUp()函数的功能是将元素垂直滑上而被其上部元素遮挡，直至完全消失。这就像是把卷帘拉起一样。.slideDown()函数的功能是将元素从其上部元素底端处垂直滑下，直至完全显示。这就像是把卷帘拉下来一样。

HTML代码如下：

<p class="hello">Hello everybody!</p>
<p class="goodbye">Goodbye!</P>
<a href="#" class="slideUp">slideUp</a>
<a href="#" class="slideDown">slideDown</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    $('a.slideUp').click(function () {
        $('p.goodbye').slideUp(1000);
        return false;
    });
    $('a.slideDown').click(function () {
        $('p.goodbye').slideDown(1000);
        return false;
    });
});

以上代码的意思是：当点击链接a.slideUp时，在1秒内将“Goodbye!”滑上去，直至消失（它会被“Hello everybody!”完全遮挡，其实最终是被移除了）。当点击链接a.slideDown时，在1秒内将“Goodbye!”从“Hello everybody!”底部滑下来，直至停稳。

这里有一个应用方面的建议：如果要操作的元素在正常文档流之外，比如position属性设为“absolute”绝对定位或者元素设置为浮动的，应该使用淡入淡出函数；如果要操作的元素属于正常文档流之内，最好使用滑上滑下，因为如果使用淡入淡出，操作的元素会有突然“撑开”文档或突然“抽身而去”的现象，会产生突兀的跳跃感。

设置元素显示和隐藏是两个动作，可以分别调用.show()和.hide()函数。而在jQuery中有一个函数可以同时兼有显示和隐藏的功能，这就好像一个切换显示状态的按钮，可以轮流调用.show()和.hide()函数，这个函数就是.toggle()函数。

HTML代码如下：

<p class="hello">Hello everybody!</p>
<p class="goodbye">Goodbye!</P>
<a href="#" class="toggle">toggle</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    $('a.toggle').click(function () {
        $('p.goodbye').toggle(1000);
        return false;
    });
});

以上代码中，当链接a.toggle被点击后，会找到类为“goodbye”的p元素，先判断此时p.goodbye元素是处于“显示”状态还是“隐藏”状态。如果是显示状态则隐藏元素p.goodbye（如同调用.hide()函数）；如果是隐藏状态则显示元素p.goodbye（如同调用.show()函数）。

.toggle函数与.show()和.hide()函数类似，会同时修改元素的高度、宽度和不透明度。jQuery还有一个.slideToggle()函数，它也是可以显示和隐藏元素，但是.slideToggle()函数效果与.slideUp()和.slideDown()函数类似，只通过改变元素的高度来实现显示和隐藏效果。