<!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>