31-动画效果

来源：互联网发布：厚学网cms建站编辑：程序博客网时间：2024/05/18 02:45

一、显示隐藏

$("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>

0 0