08-解决方案

7.1.2　解决方案

作为参考，如果只是要显示元素，代码如下：

$(document).ready(function () {
　 $('#animate').click(function () {
　　　$('.box').show();
　 });
};

如果我们想要切换方框的显示/隐藏，可以使用下面的语句代替 .show() ：

$('.box').toggle();

但是，解决方案要比简单地切换显示属性更吸引人。所以，我们来看看滑动和淡入/淡出方法的使用：

Slide

$(document).ready(function () {
　 $('#animate').click(function () {
　　　$('.box').slideToggle('slow');
　 });
});

Fade

因为没有不透明度的切换函数，所以可以使用 fadeIn 和 fadeOut 的组合：

$(document).ready(function () {
　 $('#animate').click(function () {
　　　var $box = $('.box');
　　　if ($box.is(':visible')) {
　　　　 $box.fadeOut('slow');
　　　} else {
　　　　 $box.fadeIn('slow');
　　　}
　 });
});

也可以用 fadeTo 方法创建自己的淡入/淡出切换动画：

$(document).ready(function () {
　 $('#animate').click(function () {
　　　$('.box').fadeTo('slow', 'toggle');
　 });
});

但是，我认为使用 animate 方法对未来的维护更好：

$(document).ready(function () {
　 $('#animate').click(function () {
　　　$('.box').animate({ opacity : 'toggle' }, 'slow');
　 });
});

同时切换

如果我们想同时切换高度和不透明度，可以重用前面的解决方案，同时切换高度。这使得方框在淡出的同时向上滑动：

$(document).ready(function () {
　 $('#animate').click(function () {
　　　$('.box').animate({
　　　　 opacity : 'toggle',
　　　　 height: 'toggle'
　　　}, 'slow');
　 });
});