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 ...
随机推荐
- php生成html 伪静态？？
先建一个网页模板文件,命名为tmp.html,内容如下: <!DOCTYPE html> <html> <head> <title&g ...
- C#读取word文件
第一步:添加对在项目引用里添加上对Microsoft Word 11.0 object library的引用.右击--引用---在com标签下添加.
- javascript 回调， 单线程执行
原文: http://www.cnblogs.com/aaronjs/p/3322466.html 这里的"回调"并不是"阻塞",而会空出执行线程,直至操作完成 ...
- php自学笔记3
-------补充--------建议定义常量时,判断常量名是否被定义,用defined()判断,返回布尔型if(!defined("POEM")){//没定义过 define(& ...
- 编写一个python脚本功能-备份
版本一 解决方案当我们基本完成程序的设计,我们就可以编写代码了,它是对我们的解决方案的实施.版本一例10.1 备份脚本——版本一 #!/usr/bin/python # Filename: backu ...
- (简单) POJ 1847 Tram，Dijkstra。
Description Tram network in Zagreb consists of a number of intersections and rails connecting some o ...
- ARM-LINUX学习笔记-1
安装完linux之后记得系统更新,更新使用apt命令,如下(记得使用之前使用sudo -i 指令切换到root用户模式) apt-get update 更新系统软件源,相当于查找更新 apt-get ...
- POJ3268Dijkstra
题意:给定n个点,m条边,求所有顶点中到顶点x的来回最短距离 分析:考虑到数据范围,选用Dijkstra,用Floyd会超时 #include <iostream> #include &l ...
- Codeforces#360Div2
A题 题意:给定d个操作,每个操作当中只包含1和0,若存在0,则表示操作者获胜,求最大的连续获胜个数 分析:直接统计之后用一个数组纪录下来即可 #include <iostream> #i ...
- MYSQL-group_concat设置group_concat_max_len
MySQL提供的group_concat函数可以拼接某个字段值成字符串,如 select group_concat(user_name) from sys_user,默认的分隔符是 逗号,即" ...