jQuery 动画的执行
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(); // 通过淡化、加深来实现显示和隐藏之间的切换
});
jQuery 动画的执行的更多相关文章
- jQuery判断动画是否执行完成
JS $(function() { $("#myDiv").bind("click", function() { if ($(this).css("t ...
- jquery动画函数里面可以跟一个回调函数，表示动画结束后执行的代码
jquery动画函数里面可以跟一个回调函数,表示动画结束后执行的代码 使用js监听动画结束后进行的操作: $ele.fadeIn(300,function(){...}) $ele.fadeOut(3 ...
- jQuery动画与特效详解
本文主要是讲解和学习jQuery的自动显隐,渐入渐出等. 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏. 代码如下: &l ...
- jQuery动画的实现
没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
- 深入学习jQuery动画队列
前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...
- jquery动画，基础以及我发现的新大陆
$.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...
- 让网站动起来！12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
随机推荐
- UESTC 1222 Sudoku
爆搜即可 /* *********************************************** author : email :523689985@qq.com created tim ...
- js中：Date.utc()方法与getTime()方法返回值不相等的原因
// Date.UTC() 方法接受的参数同日期构造函数接受最多参数时一样,返回从1970-1-1 00:00:00 UTC到指定日期的的毫秒数. var utcDate = Date.UTC(201 ...
- 【BZOJ 1572】 1572: [Usaco2009 Open]工作安排Job（贪心+优先队列）
1572: [Usaco2009 Open]工作安排Job Description Farmer John 有太多的工作要做啊!!!!!!!!为了让农场高效运转,他必须靠他的工作赚钱,每项工作花一个单 ...
- [转] spring事务管理几种方式
前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只要把思路理清,还是比较好掌握的. ...
- 实战3--项目开始--准备:::资源分类, 日志系统, 写BaseDao
项目资源分类: 1. package: base, dao, dao.impl, domain, service, service.impl, util, view.action 2. co ...
- Java笔记（二）
10. public protected default private 同一个类中 √ √ √ √ 同一个包中 √ √ √ 子类 √ √ 不同包中 √ 11. 线程: s ...
- Linux下gcc编译生成动态链接库*.so文件并调用它 是转载的
动态库*.so在linux下用c和c++编程时经常会碰到,最近在网站找了几篇文章介绍动态库的编译和链接,总算搞懂了这个之前一直不太了解得东东,这里做个笔记,也为其它正为动态库链接库而苦恼的兄弟们提供一 ...
- (简单) FZU 1686 神龙的难题 , DLX+可重复覆盖。
Description 这是个剑与魔法的世界.英雄和魔物同在,动荡和安定并存.但总的来说,库尔特王国是个安宁的国家,人民安居乐业,魔物也比较少.但是.总有一些魔物不时会进入城市附近,干扰人民的生活.就 ...
- [iOS Animation]-CALayer 变换
变换 很不幸,没人能告诉你母体是什么,你只能自己体会 -- 骇客帝国 在第四章“可视效果”中,我们研究了一些增强图层和它的内容显示效果的一些技术,在这一章中,我们将要研究可以用来对图层旋转,摆放或者扭 ...
- [iOS Animation]-CALayer 视觉效果
视觉效果 嗯,圆和椭圆还不错,但如果是带圆角的矩形呢? 我们现在能做到那样了么? 史蒂芬·乔布斯 我们在第三章『图层几何学』中讨论了图层的frame,第二章『寄宿图』则讨论了图层的寄宿图.但是图层不仅 ...