jQuery 动画的执行
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <meta charset="UTF-8"> <title>b index</title> <link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'> <style type="text/css"> .s1{ width: 100px; height: 100px; background-color: pink; position: relative; } .s2{ width: 50px; height: 50px; background-color: green; } </style> </head> <body style="margin:1px;"> <div id="div001" class='s1'>div001</div> <div id='div002'>div002</div> <div id='div003'>div003</div> <div> <button id="btn001">click me to hide div001 </button> <button id="btn002">click me to show div001 </button> <button id="btn003">click me to fadeIn div001 </button> <button id="btn004">click me to fadeOut div001 </button> <button id="btn005">click me to slideDown div001 </button> <button id="btn006">click me to slideUp div001 </button> <button id="btn007">click me to animate div001 separately </button> <button id="btn008">click me to animate div001 synchronisation </button> <button id="btn009">click me to animate div001 and css it </button> <button id="btn010">click me to animate div001 and fn to css it </button> <button id="btn011">click me to stop div001 animate </button> <button id="btn012">click me to bind div001 hover animate without stop</button> <button id="btn013">click me to bind div001 hover animate with stop</button> <button id="btn014">click me to bind div001 hover animate with stop</button> <button id="btn015">click me to bind div001 hover animate with stop(true)</button> <button id="btn016">click me to get animated div</button> <button id="btn017">click me to use delay</button> </div> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="b/js/bootstrap.js"></script> <script type="text/javascript" src="js/index044.js"></script> </body> </html>
$(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(); // 通过淡化、加深来实现显示和隐藏之间的切换
});