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 ...
随机推荐
- java中的装饰设计模式，浅谈与继承之间的区别
最初接触装饰设计模式,一直搞不懂这么做的意义是什么,看了网上很多的资料,对于与继承的区别并没有很清楚的分析,直到看到这篇博客:http://www.cnblogs.com/rookieFly-tdii ...
- 深入理解setTimeout和setinterval
以前一直以为这两个函数就是简单了认为类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方 ...
- document.createElement方法的使用
我们在使用createElemen方法t创建一个元素节点的时候,似乎在IE下面怎么写都可以,但切换到FF等其它浏览器却总是会报错. 比如我们要创建一个input元素,那么在IE下,我们可以有多种写法: ...
- CodeForces 614D Skills
排序+枚举+二分 最大的那些变成A,小的那部分提高最小值 #include<cstdio> #include<cstring> #include<cmath> #i ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- c#之时间戳与DateTime的相互转换
1. 时间戳转 DateTime static DateTime GetServerNow(ulong serverTime) { DateTime dateTimeStart = TimeZone. ...
- uartz Spring与Spring Task总结
Spring对Quartz作了一个封装,同时,Spring自己也提供了一个任务定时器(spring-task),现把它总结一下. 对于Quartz,我们使用的时候主要是注重两个方面,一个是定时任 ...
- 使用flexbox来布局web应用
使用 flexbox 可以帮助你设计出引人注目的布局,并且在pc端或移动端能够很好的缩放.告别使用浮动的 <div> 元素.绝对定位 和一些JavaScript hacks, 使用仅仅几行 ...
- TM一句备注讲清楚TCP3次握手
1)C要跟S建立连接,现在,C向S发送连接建立标记SYN=1已经该次请求的序列号Seq=m. 2)S收到C的请求后,有空鸟C,那么,向C回发受勾信号ACK=1,已经该次约会的请求对应好ack=m+1 ...
- 浅谈IOS8之size class 分类： ios技术 2015-02-05 19:06 62人阅读 评论(0) 收藏
文章目录 1. 简介 2. 实验 3. 实战 3.1. 修改 Constraints 3.2. 安装和卸载 Constraints 3.3. 安装和卸载 View 3.4. 其他 4. 后话 以前和安 ...