jquery20--animate() : 运动的方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; background:red; display:none;}
</style>
<script src="jquery-2.0.3.js"></script>
<script> 定义一些变量
tweeners = {}; √
function createFxNow(){} √
function createTween(){} √
function Animation(){} √
function propFilter(){} √
jQuery.Animation = jQuery.extend( Animation, { √
tweener
prefilter
});
function defaultPrefilter(){} √
function Tween(){} √
Tween.prototype = { √
init
cur
run
};
Tween.propHooks = {}; √
jQuery.each([ "toggle", "show", "hide" ], function(){}); √
jQuery.fn.extend({
fadeTo √
animate √
stop √
finish √
});
function genFx(){} √
jQuery.each({ √
slideDown
slideUp
slideToggle
fadeIn
fadeOut
fadeToggle
}, function() {});
jQuery.speed = function(){}; √
jQuery.easing = { √
linear
swing
};
jQuery.timers = []; √
jQuery.fx.tick = function(){}; √
jQuery.fx.timer = function(){}; √
jQuery.fx.interval = 13; √
jQuery.fx.start = function(){}; √
jQuery.fx.stop = function(){}; √
jQuery.fx.speeds = {}; √*/ show
hide
toggle
slideDown
slideUp
slideToggle
fadeIn
fadeOut
fadeToggle
fadeTo $(function(){ $('input').click(function(){ $('#div1').hide(1000); //改变width height opacity
$('#div1').show(1000); //改变width height opacity
$('#div1').toggle(1000);
$('#div1').slideUp(1000);//向上收起
$('#div1').slideDown(1000);//向下展开
$('#div1').slideToggle(1000); //height
$('#div1').fadeIn(1000,0.5);
$('#div1').fadeOut(1000,0.5);
$('#div1').fadeToggle(1000); //opacity //宽度变成400，执行时间，linear匀速的，回调
$('#div1').animate({ width : 400 },4000,'linear',function(){
alert(123);
});
$('#div1').animate({ width : 'hide' , height : 'hide' , opacity : 'hide' },1000,'linear',function(){
alert(123);
}); $('#div1').animate({ height : 'toggle' },1000,'linear',function(){
alert(123);
});
$('#div1').fadeTo(1000,0.5);
$('#div1').animate({ opacity : 0.5 },1000,'linear',function(){
});
});
});
</script>
</head> <body>
<input type="button" value="点击">
<div id="div1"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; background:red; position:absolute;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
$('input').click(function(){
//3个入队操作fx
$('#div1').animate({ width : 300 },1000);
$('#div1').animate({ height : 300 },1000);
$('#div1').animate({ left : 300 },1000);
}); //jQuery.fx.off = true; //关闭页面所有的运动
$('input').click(function(){
$('#div1').animate({ opacity : 0.5 },1000,'linear',function(){
});
//配置写运动
$('#div1').animate({ width : 400 },{
duration : 'slow', //速度慢速
easing : 'linear', //匀速
complete : function(){ //完成回调
alert(111);
}
});
});
});
</script>
</head> <body>
<input type="button" value="点击">
<div id="div1"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:20px; height:200px; background:red; position:absolute;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
$('input').click(function(){
$('#div1').animate({ width : '50%' },2000);//屏幕的一半，tweeners处理的
$('#div1').animate({ width : '+=200' },2000);
$('#div1').animate({ 'marginLeft' : 200 },2000); //margin-left -> marginLeft $('#div1').animate({ 'margin' : 200 },2000); //marginLeft marginTop marginBottom marginRight $('#div1').animate({ 'width' : [200,'linear'] , 'height' : [20,'swing'] },2000); $('#div1').animate({ 'width' : 200 , 'height' : 20 },{ specialEasing : {
'width' : 'linear',
'height' : 'swing'
} }); }); }); </script>
</head> <body>
<input type="button" value="点击">
<div id="div1"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
$('input').click(function(){
$('#div1').animate({ 'width' : 300 },{
queue : false
}).animate({ 'height' : 300 },{}); $('#div1').animate({ 'width' : 300 },5000); $('#div1').animate({ 'width' : 300 },{
step：function(A){
CONSOLE.LOG(A);//每次位置的变化值
}
done : function(){
console.log(123);
}
});
});
}); </script>
</head> <body>
<input type="button" value="点击">
<div id="div1"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:30px; background:red; }
#div2{ width:100px; height:30px; background:red; margin-top:20px;}
#div3{ width:100px; height:30px; background:red; margin-top:20px;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
$('input').click(function(){
$('#div1').animate({width : 500} , 2000 , 'linear');
$('#div2').animate({width : 500} , 2000 , 'swing');
$('#div3').animate({width : 500} , 2000 , 'miaov');
});
}); </script>
</head> <body>
<input type="button" value="点击">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; }
#div2{ width:100px; height:30px; background:red; margin-top:20px;}
#div3{ width:100px; height:30px; background:red; margin-top:20px;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
$('input').eq(0).click(function(){
$(document.documentElement).animate({ scrollTop : 600 },2000);
$('#div1').animate({ width : 300 },2000).animate({ height : 300 },2000);
}); $('input').eq(1).click(function(){
$(document.documentElement).animate({ scrollTop : 600 },2000);
$('#div1').stop(); //默认的，停止当前运动，不会影响队列的后续运动
$('#div1').stop(true);//后面运动也停止
$('#div1').stop(true,true); //会停止立即转到当前运动的结束位置
$('#div1').finish();//会停止立即转到所有运动的结束位置
});
}); </script>
</head> <body style="height:2000px;">
<input type="button" value="点击"><input type="button" value="停止运动">
<div id="div1"></div>
</body>
</html>
jquery20--animate() : 运动的方法的更多相关文章
- jquery11源码 animate() : 运动的方法
{ var fxNow, timerId, rfxtypes = /^(?:toggle|show|hide)$/, rfxnum = new RegExp( "^(?:([+-])=|)( ...
- JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...
- 如何用js自己实现Animate运动函数
js运动是我们学习js必不可少的研究部分,首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已,比如不断改变一个绝对定位div的left值,那么你看到的效果就是这个div不断的向右边运动,那 ...
- jQuery animate动画 stop()方法详解~
一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...
- jQuery animate easing使用方法
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- 原生JS封装animate运动框架
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- Jquery animate的使用方法
js: $('#colspan').click(function () { if ($('#colspan').hasClass('glyphicon-chevron-up')) { $('#cols ...
- 可用于jquery animate（）方法的css属性
* backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWidth * border ...
- jquery animate() stop() finish() 方法使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- [Swift]forEach详解
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 23.STL容器小结
- 集合 List和Set
分别向Set集合以及List集合中添加“A”,“a”,“c”,“C”,“a”5个元素,观察重复值“a”能否在List集合以及Set集合中成功添加. List<String> ls=new ...
- Spring项目的配置文件们(web.xml context servlet springmvc)
我们的spring项目目前用到的配置文件包括1--web.xml文件,这是java的web项目的配置文件.我理解它是servlet的配置文件,也就是说,与spring无关.即使你开发的是一个纯粹jsp ...
- 888E - Maximum Subsequence 中途相遇法
Code: #include<cstdio> #include<algorithm> #include<cstring> #include<string> ...
- 超链接：a标签
a标签的功能:实现跳转功能 a标签的重要属性:href,target href的值为跳转目标的地址,如果是跳转页面的话,需要这个页面的超链接. target的值有四个:_blank._self._pa ...
- [NOIP2016普及组]魔法阵
题目:洛谷P2119.Vijos P2012.codevs5624. 题目大意:有n件物品,每件物品有个魔法值.要求组成魔法阵(Xa,Xb,Xc,Xd),该魔法阵要满足Xa<Xb<Xc&l ...
- 自己定义View之Chart图标系列（1）——点阵图
近期要做一些图表类的需求,一開始就去github上看了看,发现开源的图表框架还是蛮多的.可是非常少有全然符合我的需求的.另外就是使用起来比較麻烦.所以就决定自己来造轮子了~~~ 今天要介绍的就是And ...
- Linux同步与相互排斥应用（零）：基础概念
[版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet 或 .../gentleliu,文章仅供学习交流,请勿用于商业用途] 当操作系统进入多道批处理系统时 ...
- Trie树的常见应用大总结（面试+附代码实现）
(一)Trie的简单介绍 Trie树,又称字典树,单词查找树或者前缀树.是一种用于高速检索的多叉树结构,如英文字母的字典树是一个26叉树.数字的字典树是一个10叉树. 他的核心思想是空间换时间,空间消 ...