使用JQuery，我们可以将某些标准效果应用于页面中的HTML元素。每个效果都是通过在JQuery中调用特殊效果函数来实现的。这些效果函数中最常见的是：

• show()
• hide()
• toggle()
• slideDown()
• slideUp()
• slideToggle()
• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()
• animate()

show()

show()方法可以显示一个隐藏的元素，例如一个div或者一个img元素。这是一个简单的示例：

$('#theImg').show();

HTML元素可以通过hide()方法或者CSS来隐藏，如下所示：

<img id="theDiv" style="display: none" src="..." />

我们可以将速度传递给show()方法，该方法告诉JQuery显示元素的速度。我们可以选择三种预定义的速度，也可以选择自定义的毫秒数。这里有一些例子：

$('#theImg').show('slow');
$('#theImg').show('medium');
$('#theImg').show('fast');
$('#theImg').show(2000);

注意：在Firefox中，将img放入div中，然后隐藏并显示div看起来比直接隐藏并显示img更好。我们必须尝试一下，以了解最适合页面的方法。

也可以将一个函数传递给show()，一旦元素被完全显示，该函数便会执行。以下是一些示例：

$('#theImg').show(function(){ alert('shown');} );
$('#theImg').show(2000, function(){ alert('shown');} );

hide()

JQuery的hide()方法可以隐藏HTML元素。就像show()一样，我们可以选择几种速度，包括以毫秒为单位设置自己的速度。以下是一些代码示例：

$('#theDiv').hide();
$('#theDiv').hide('slow');
$('#theDiv').hide('medium');
$('#theDiv').hide('fast');
$('#theDiv').hide(2000);

也可以将一个函数传递给hide()，一旦该元素被完全隐藏，该函数便会执行。方法如下：

$('#theDiv').hide(function(){ alert('shown');} );
$('#theDiv').hide(2000, function(){ alert('shown');} );

toggle()

JQuery的toggle()函数可切换HTML元素的可见性状态。换句话说，如果元素是隐藏的，则将显示它。如果显示，它将被隐藏。同样，我们可以通过参数设置切换速度。这里有一些例子：

$('#theDiv').toggle();
$('#theDiv').toggle('slow');
$('#theDiv').toggle('medium');
$('#theDiv').toggle('fast');
$('#theDiv').toggle(2000);

也有可能将一个函数传递给toggle()，一旦元素被完全切换，该函数便会执行。方法如下：

$('#theDiv').toggle(function(){ alert('shown');} );
$('#theDiv').toggle(2000, function(){ alert('shown');} );

slideDown()

slideDown()函数向下滑动一个隐藏的HTML元素，因此它变得可见。与show()和hide()函数一样，我们可以将速度设置为该函数的参数。这里有一些例子：

$('#theDiv').slideDown();
$('#theDiv').slideDown('slow');
$('#theDiv').slideDown('medium');
$('#theDiv').slideDown('fast');
$('#theDiv').slideDown(2000);

我们也可以将回调函数传递给slideDown()，一旦滑动完成，该函数便会执行。以下是一些示例：

$('#theDiv').slideDown(function(){ alert('done');} );
$('#theDiv').slideDown(2000, function(){ alert('done');} );

slideUp()

slideUp()函数通过向上滑动隐藏了可见的HTML元素。与show()和hide()函数一样，我们可以将速度设置为该函数的参数。这里有一些例子：

$('#theDiv').slideUp();
$('#theDiv').slideUp('slow');
$('#theDiv').slideUp('medium');
$('#theDiv').slideUp('fast');
$('#theDiv').slideUp(2000);

我们还可以将回调函数传递给slideUp()，一旦滑动完成，该函数便会执行。以下是一些示例：

$('#theDiv').slideUp(function(){ alert('done');} );
$('#theDiv').slideUp(2000, function(){ alert('done');} );

slideToggle()

如果隐藏，slideToggle()函数将显示一个HTML元素，如果可见，则将其隐藏。它是通过上下滑动HTML元素来实现的。这里有一些例子：

$('#theDiv').slideToggle();
$('#theDiv').slideToggle('slow');
$('#theDiv').slideToggle('medium');
$('#theDiv').slideToggle('fast');
$('#theDiv').slideToggle(2000);

我们还可以将回调函数传递给slideToggle()，一旦完全完成滑动就执行该回调函数。以下是一些示例：

$('#theDiv').slideToggle(function(){ alert('done');} );
$('#theDiv').slideToggle(2000, function(){ alert('done');} );

fadeIn()

" fadeIn()"函数在隐藏的HTML元素中淡入淡出。与show()和hide()函数一样，我们可以将速度设置为该函数的参数。这里有一些例子：

$('#theDiv').fadeIn();
$('#theDiv').fadeIn('slow');
$('#theDiv').fadeIn('medium');
$('#theDiv').fadeIn('fast');
$('#theDiv').fadeIn(2000);

我们还可以将回调函数传递给fadeIn()，一旦完全完成淡入淡出，该函数便会执行。以下是一些示例：

$('#theDiv').fadeIn(function(){ alert('done');} );
$('#theDiv').fadeIn(2000, function(){ alert('done');} );

fadeOut()

" fadeOut()"函数淡出可见的HTML元素。与show()和hide()函数一样，我们可以将速度设置为该函数的参数。这里有一些例子：

$('#theDiv').fadeOut();
$('#theDiv').fadeOut('slow');
$('#theDiv').fadeOut('medium');
$('#theDiv').fadeOut('fast');
$('#theDiv').fadeOut(2000);

我们还可以将回调函数传递给fadeOut()，一旦完全完成淡入淡出，该函数便会执行。以下是一些示例：

$('#theDiv').fadeOut(function(){ alert('done');} );
$('#theDiv').fadeOut(2000, function(){ alert('done');} );

fadeToggle()

如果隐藏，则fadeToggle()函数将显示HTML元素；如果可见，则将其隐藏。它通过淡入和淡出HTML元素来实现。这里有一些例子：

$('#theDiv').fadeToggle();
$('#theDiv').fadeToggle('slow');
$('#theDiv').fadeToggle('medium');
$('#theDiv').fadeToggle('fast');
$('#theDiv').fadeToggle(2000);

我们也可以将回调函数传递给fadeToggle()，该函数在淡入淡出完成后立即执行。以下是一些示例：

$('#theDiv').fadeToggle(function(){ alert('done');} );
$('#theDiv').fadeToggle(2000, function(){ alert('done');} );

fadeTo()

fadeTo()函数使我们可以部分淡入或者淡出HTML元素，使其透明。我们可以在0到1之间传递参数，该参数告诉我们元素变淡的程度。 0是完全透明的(隐藏的)，而1是完全不透明的(如图所示)。与show()和hide()函数一样，我们可以将速度设置为该函数的参数。这里有一些例子：

$('#theDiv').fadeTo(0.5);
$('#theDiv').fadeTo('slow', 0.5);
$('#theDiv').fadeTo('medium', 0.5);
$('#theDiv').fadeTo('fast', 0.5);
$('#theDiv').fadeTo(2000, 0.5);

我们还可以将回调函数传递给fadeTo()，该函数将在淡入淡出完成后立即执行。以下是一些示例：

$('#theDiv').fadeTo(0.5, function(){ alert('done');} );
$('#theDiv').fadeTo(2000, 0.5, function(){ alert('done');} );

注意：如果我们将HTML元素淡化为例如0.5，然后调用" fadeOut()"函数，然后调用" fadeIn()"函数，HTML元素将仅变回0.5，而不是1.0。我们可以通过使用页面顶部的示例按钮来查看这种效果。

animate()

使用JQuery的animate()函数可以对页面中的HTML元素进行动画处理。并非每个属性都可以设置动画。只有数字CSS属性可以。例如，我们可以设置下面属性的动画

• 边框宽度
• 宽度
• 高度
• 字体大小
• 不透明度
• 边距
• 填充
• 底部
• 左边
• 右边
• 顶部
• 单词间隔

对CSS属性进行动画处理会使其从动画开始之前的值逐渐更改为animate()函数调用中指定的值。

这是两个示例：

$('#theDiv').animate({"height" : 300}, 'slow');
$('#theDiv').animate({"width"  : 200}, 'slow');

通过将更多属性放入对象参数中，可以一次为多个属性设置动画。这是一个同时对宽度和高度进行动画处理的示例，而不是一个接一个地动画化：

$('#theDiv').animate({"height" : 250, width:250 }, 'slow');

我们还可以将回调函数传递给" animate()"函数，动画完成后即会执行该函数。这是一个例子：

$('#theDiv').animate({"width"  : 200}, 'slow',
    function(){ alert('done'); } );

Camel Case

我们可能已经注意到，某些CSS属性是混合使用大写和小写字母编写的。这是因为JavaScript对象属性不能包含连字符。例如，CSS属性border-width不能直接写为JavaScript对象的属性。此示例将无法解析：

$('#theDiv').css({ border-width : 1 });

要在动画等中使用连字符来处理CSS属性，我们必须引用属性名称，如下所示：

$('#theDiv').css({ "border-width" : 1 });

或者使用该属性的驼峰式版本，如下所示：

$('#theDiv').css({ borderWidth : 1 });

上面的示例仅显示了在css()函数中使用的属性命名。但是，相同的规则也适用于" animate()"函数内部。

切换动画

可以"切换动画" HTML元素。例如，如果切换"宽度"的动画，则第一次执行动画时，"宽度"将被动画化为0。第二次执行动画时，"宽度"将被动画化为它具有的值在第一个动画之前。这是一个例子：

$('#theDiv').animate({"width"  : 'toggle'}, 'slow' );

我们可能需要稍微使用一下此函数才能使其正常工作。我已经体验过，有时只有给定的CSS属性之一具有动画效果，等等，但我还没有找到原因(换句话说，我做错了什么)。但是，如果先将HTML元素切换为可见性，然后再次使其变为不可见，这似乎可以很好地工作。如果从另一方向开始(隐藏，然后显示)，我会遇到一些奇怪的问题。如果我们知道解决此问题的方法，请发送一封包含说明的电子邮件。

停止动画

我们还可以通过在HTML元素上调用stop()方法来停止正在进行的动画，如下所示：

$('#theDiv').stop();

如果要开始新的动画，并且不想让两个动画同时运行，则停止动画可能会很有用。

关于jQuery效果的总结。通过组合这些效果，我们可以创建自己的更高级的效果。例如，滑动和淡入淡出的混合等等。花一些时间尝试各种可能性，以使它们对它们的工作方式以及在应用程序中可以使用的东西有很好的感觉。请记住，有些效果在我们第一次看到它们时看起来不错，但过了一会儿就会变得很累。