一、显示隐藏
$("div").show();
$("div").hide();
参数为速度,毫秒单位,参数可以为:slow,normal,fast.默认400毫秒。
回调函数
$(document).ready(function(){ $('div').hide('slow',function(){ alert('显示完毕!'); }); });
-
列队动画
$('input:eq(0)').click(function(){ $('p:eq(0)').hide('slow',function aa(){ $(this).next('p').hide('slow',aa); }); }); $('input:eq(1)').click(function(){ $('p:eq(2)').show('slow',function aa(){ $(this).prev('p').show('slow',aa); }); }); //显示隐藏开关 $('input:eq(1)').click(function(){ $('p').toggle('slow'); });
2.向上卷动,向下展开
slideUp,slideDown,toggle切换
3.淡入,淡出,参数0-1之间
fadeIn(),fadeOut(),fadeToggle(),fadeTo(0~100);
4.自定义动画
$(document).ready(function(){ $("input").click(function(){ $('div').animate({ width:'200px', height:'200px', opacity:0.5, fontSize:'50px' },2000,function(){ alert('动画执行完毕!'); }); }); });
5.stop停止动画
$(document).ready(function(){ $("input[value='开始']").click(function(){ $('div').animate({ marginLeft:'250px'},3000).delay(5000) .animate({ height:'100px' },3000) .animate({ width:'200px' },3000); }); $("input[value='停止'").click(function(){ //停止第一个列队动画,后面继续执行 // $('div').stop(); //停止并清除后面的动画 //$('div').stop(true); //停止后停到末尾的位置 $('div').stop(true,true); }); }); <body > <div style='background:red;position:absolutely;width:100px;'> aaaa </div> <input type="button" value="开始"/> <input type="button" value="停止"/> </body>
6.连续动画
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("input[value='开始']").click(function(){ $('div').slideToggle(2000,function(){ $(this).slideToggle(2000,arguments.callee); }); }); $("input[value='停止'").click(function(){ $(':animated').stop(true); }); }); </script> <style> div{ position:absolutely; } </style> </head> <body > <div style='background:red;position:absolutely;width:100px;height:300px;'> aaaa </div> <input type="button" value="开始"/> <input type="button" value="停止"/> </body> </html>
7.$.fx.interval=200;设置动画帧,默认13
$.fx.off=true;关闭所有动画
8.swing缓动,linear,匀速,运动方式,默认为swing.加在时间参数后面。
<script> $(document).ready(function(){ $("input[value='开始']").click(function(){ $('div').slideToggle(2000,'linear',function(){ $(this).slideToggle(2000,'linear',arguments.callee); }); }); $("input[value='停止'").click(function(){ $(':animated').stop(true); }); }); </script>