jQuery 动画的执行
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%>b index div001div002div003
$(function() { $('#btn001').click(btn001Click); $('#btn002').click(btn002Click); $('#btn003').click(btn003Click); $('#btn004').click(btn004Click); $('#btn005').click(btn005Click); $('#btn006').click(btn006Click); $('#btn007').click(btn007Click); $('#btn008').click(btn008Click); $('#btn009').click(btn009Click); $('#btn010').click(btn010Click); $('#btn011').click(btn011Click); $('#btn012').click(btn012Click); $('#btn013').click(btn013Click); $('#btn014').click(btn014Click); $('#btn015').click(btn015Click); $('#btn016').click(btn016Click); $('#btn017').click(btn017Click);});function btn001Click(e) { // 在div001已经隐藏的情况下，不会有动画显示，但是会立刻执行动画完成函数； $('#div001').hide('slow', function() { console.log('div001 hide slow'); });}function btn002Click(e) { // 在div001已经显示的情况下，不会有动画显示，但是会立刻执行动画完成函数； // div001的宽、高、透明度都进行逐渐变化； $('#div001').show('slow', function() { console.log('div001 show slow'); });}function btn003Click(e) { // 在div001已经显示的情况下，不会有动画显示，但是会立刻执行动画完成函数； // div001的宽、高都是一下子变成正常值，然后只有透明度从0逐渐变为正常值； $('#div001').fadeIn('slow', function() { console.log('div001 fadeIn slow'); });}function btn004Click(e) { // 在div001已经不显示的情况下，不会有动画显示，但是会立刻执行动画完成函数； // div001的透明度从正常值逐渐变为0，然后宽、高一下子变成0； $('#div001').fadeOut('slow', function() { console.log('div001 fadeOut slow'); });}function btn005Click(e) { // 高度从上到下逐渐增加，逐渐显示某个元素； $('#div001').slideDown('slow', function() { console.log('div001 slideDown slow'); });}function btn006Click(e) { // 高度从下到上逐渐减小，逐渐隐藏某个元素； $('#div001').slideUp('slow', function() { console.log('div001 slideUp slow'); });}// 对div001依次执行动画效果；function btn007Click(e) { $('#div001').animate({ left : '50px' // div001的position必须是relative/absolute才可以产生变化； }, 3000, function() { console.log('div001 animate left 50px slow'); }).animate({ height : '200px' }, 'slow', function() { console.log('div001 animate height 200px slow'); }).animate({ left : '+60px' // 这个相对于只往右侧移动了10px，都是相对于最开始的位置的； }, 'slow', function() { console.log('div001 animate left +60px slow'); }).animate({ left : '+=60px' // 这个相对于又往右侧移动了60px，相对于当前的位置； }, 'slow', function() { console.log('div001 animate left +=60px slow'); });}// 同步执行的动画；function btn008Click(e) { $('#div001').animate({ left : '50px', height : '200px' }, 'slow', function() { console.log('div001 animate left, height'); }).fadeOut('slow');// 自定义动画可以附加上系统自带的动画效果；}function btn009Click(e) { $('#div001').animate({ left : '50px', height : '200px' }, 'slow', function() { console.log('div001 animate left, height'); }).css('border', '5px solid blue');// 这样的css函数会在动画开始的时候立即执行；如果希望在动画执行完毕之后执行，需要使用回调函数；}function btn010Click(e) { $('#div001').animate({ left : '50px', height : '200px' }, 5000, function() { console.log('div001 animate left, height'); $(this).css('border', '5px solid blue');// 这样css函数会在动画执行完毕之后执行； });}function btn011Click(e) { // 立刻暂停当前的动画，不会执行当前动画的回调函数，但是会继续执行动画队列中的下一个动画； // $('#div001').stop(); // 立刻暂停当前的动画，并且清空了动画队列中的所有动画；不会执行任何动画的回调函数； // $('#div001').stop(true); // 当前动画立即完成，调用当前动画的回调函数，清空动画队列中的所有动画； $('#div001').stop(true, true);}function btn012Click(e) { // 这样的动画会有问题，如果鼠标快速移出的话，div001会把第一个动画执行完毕，再执行第二个动画； $('#div001').hover(function() { $(this).animate({ height : '150', width : '300' }, 'slow'); }, function() { $(this).animate({ height : '22', width : '60' }, 'slow') });}function btn013Click(e) { $('#div001').hover(function() { $(this).stop().animate({ // 增加了stop会把之前在执行的动画停止； height : '150', width : '300' }, 'slow'); }, function() { $(this).stop().animate({ height : '22', width : '60' }, 'slow') });}function btn014Click(e) { $('#div001').hover(function() { $(this).stop().animate({ // 如果不增加stop(true)，只能停止当前的动画，下一个动画队列还是会执行的； height : '150' }, 'slow').animate({ width : '300' }, 'slow'); }, function() { $(this).stop().animate({ height : '22' }, 'slow').animate({ width : '60' }, 'slow'); });}function btn015Click(e) { $('#div001').hover(function() { $(this).stop(true).animate({ // 增加了stop(true),可以把没有执行的动画队列清空； height : '150' }, 'slow').animate({ width : '300' }, 'slow'); }, function() { $(this).stop(true).animate({ height : '22' }, 'slow').animate({ width : '60' }, 'slow'); });}function btn016Click(e) { // 这样会直接返回true，不能返回移动的对象； var obj = $('div').is(':animated'); console.log(obj); // 这样可以得到正在移动的对象； var obj2=$('div:animated'); console.log(obj2);}function btn017Click(e) { // 延迟一下动画的执行； $('#div001').slideUp(1000).delay(1000).slideDown(1000);} 显示/隐藏切换处理：
$('h5').click(function(e) { // $(this).next().toggle(); // 在显示和隐藏之间切换 // $(this).next().slideToggle(); // 通过向上收起、向下放开来实现显示和隐藏之间的切换 // $(this).next().fadeTo(600,0.2);// 在600毫秒之内淡化（fade）到0.2 $(this).next().fadeToggle(); // 通过淡化、加深来实现显示和隐藏之间的切换 });