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 ...
随机推荐
- Android App监听软键盘按键的三种方式（转）
最近有类似需求,在csdn上刚好发现,粘贴过来,以防止忘记喽 前言: 我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的“G ...
- Xamarin For Visual Studio 3.0.54.0 完整离线破解版
Xamarin For Visual Studio 3.0.54.0 完整离线破解版 Xamarin For Visual Studio就是原本的Xamarin For Android 以及 Xama ...
- c# toolstrip控件怎么把左边的几个小点去掉？？
选中你的toolstrip 然后属性属性中有个 GripStyle 设置Hidden
- 基本的dom操作方法
childNodes 返回当前元素所有子元素的数组firstChild 返回当前元素的第一个下级子元素lastChild 返回当前元素的最后一个子元素nextSibling 返回紧跟在当前元素后面的元 ...
- svn版本库通过svn://127.0.0.1/不能导出的问题解决了！！
svn:本地file:///E:/SvnServerHome没问题,但是换为svn://192.168.1.100/SvnServerHome 报异常. 配置http协议访问svn 原文:http:/ ...
- php的autoload机制
php5版本中,当你尝试使用一个未定义的类或者接口时,会自动调用__autoload()函数 例如1 <?php function __autoload($class_name){ includ ...
- 前台html与后台php通信（上传文件）
这部分为导入txt文本文件,存放在服务器然后返回txt文本的内容到前台进行相应操作 前台html代码 <div id="coordinate_div"> ...
- function $(id){ return document.getElementById(id); }导致所有的js不能用解决办法。。。。
function $(id){ return document.getElementById(id); } document.getElementById(id) 是获得id这个元素的. 相当于定义了 ...
- MQTT研究
http://www.jianshu.com/collection/1c742515f8d8 http://blog.csdn.net/gaojq_ios/article/details/481597 ...
- locate/slocate命令
locate命令和slocate命令都用来查找文件或目录. locate命令其实是find -name的另一种写法,但是要比后者快得多,原因在于它不搜索具体目录,而是搜索一个数据库/var/lib/l ...