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/ ...

随机推荐

84.Node.js -Mongoose 方法
转自:https://www.cnblogs.com/chris-oil/p/9136534.html Mongoose 参考手册标签(空格分隔): MongoDB Mongoose 是什么? 一般 ...
数据结构之fhq-treap
本文内容部分转自某大佬博客:https://blog.csdn.net/CABI_ZGX/article/details/79963427 例题:https://www.luogu.org/probl ...
相机拍照友盟检测crash是为什么？
友盟报错如下* setObjectForKey: object cannot be nil (key: UIImagePickerControllerOriginalImage)(null)(( 0 ...
PostgreSQL相关总结
源码安装PostgreSQL总结简明安装步骤(其中prefix指定PostgreSQL的安装目录,该目录与数据目录pgdata和PostgreSQL的源代码包目录均无关) yum -y instal ...
codeforces 400 D Dima and Bacteria【并查集 Floyd】
题意:给出n个点,分别属于k个集合,判断每个集合里面的点的距离都为0,为0的话输出yes,并输出任意两个集合之间的最短路这道题目有两个地方不会处理, 先是n个点,分别属于k个集合,该怎么记录下来这里 ...
tensorflow-gpu
1.Cuda 查看Cuda支持的GPU型号:https://developer.nvidia.com/cuda-gpus 下载cuda:https://developer.nvidia.com/cud ...
Lenovo k860i 移植Android 4.4 cm11进度记录【下篇--实时更新中】
2014.8.24 k860i的cm11的移植在中断了近两三个月之后又开始继续了,进度记录的日志上一篇已经没什么写的了,就完结掉它吧,重新开一篇日志做下篇好了.最近的战况是,在scue同学的努力之下, ...
Java基础学习总结（12）——一哈希编码HashCode
一.哈希编码现在是站在JAVA虚拟机的角度来看内存里面的布局,站在JAVA虚拟机的角度,在内存里面有好多好多个对象,这里用椭圆来代表一个个对象.一个程序运行起来的时候,可能会有很多个对象在内存里面分 ...
poj 2533 Longest Ordered Subsequence 最长递增子序列(LIS)
两种算法 1. O(n^2) #include<iostream> #include<cstdio> #include<cstring> using namesp ...
【Hibernate步步为营】--多对多映射具体解释
上篇文章具体讨论了一对多映射,在一对多映射中单向的关联映射会有非常多问题,所以不建议使用假设非要採用一对多的映射的话能够考虑使用双向关联来优化之间的关系,一对多的映射事实上质上是在一的一端使用< ...

jquery20--animate() : 运动的方法

jquery20--animate() : 运动的方法的更多相关文章

随机推荐

热门专题