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 ...
随机推荐
- libevent总结学习
Memcached用了libevent,但是Redis没有用libevent.Redis的代码还没有libevent的三分之一. libevent有下面几大部分组成: * 事件管理包括各种IO(soc ...
- c# winform 点击按钮切换tabcontrol标签
this.tabControl1.TabPages.Remove(tabPage1); this.tabControl1.TabPages.Remove(tabPage2); this.tabCont ...
- CSS中绝对定位依据谁进行定位？
结论 绝对定位的top等的依据元素需满足3个条件: 已定位(position:relative/fixed/absolute) 最近的 祖辈元素(一定是祖辈元素不是同辈元素) 说明 一般会为body设 ...
- Android学习笔记之Service
与服务通信 用bindservice 而startservice并无通信条件. service 为android为系统服务,所以程序员无法new出来,只能建立服务,共其他组件使用. package c ...
- margin 塌陷现象 与 注意事项
1.在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象. 但是,脱标之后就不会出现margin的塌陷现象. 2.margin:0 auto; 会让盒子水平居 ...
- 简单制作 OS X Yosemite 10.10 正式版U盘USB启动安装盘方法教程 (全新安装 Mac 系统)
原文地址: http://www.iplaysoft.com/osx-yosemite.html 简单制作 Mac OS X Yosemite 正式版 USB 启动盘的方法教程: 其实制作 OS X ...
- jquery如何判断元素是否被点击_百度知道
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div id="parent"> <a id="a1" ...
- Android编程中的5种数据存储方式
Android编程中的5种数据存储方式 作者:牛奶.不加糖 字体:[增加 减小] 类型:转载 时间:2015-12-03我要评论 这篇文章主要介绍了Android编程中的5种数据存储方式,结合实例形式 ...
- CI分页器pagination的原理及实现
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 下面这段代码是从官网上翻译过来的,介绍了分页的用例 1 2 3 4 5 6 ...
- c++几个新特性
template 模板 1.出于通用性考虑,程序库中几乎所有东西都被设计为template形式,不支持template几乎不能使用标准程序库. 2.所谓template,是针对"一个或多个尚 ...