31-动画效果

最新推荐文章于 2023-04-04 11:00:51 发布

会编程的阿强

最新推荐文章于 2023-04-04 11:00:51 发布

阅读量328

点赞数

分类专栏： JQuery和Ajax

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/53195944

版权

JQuery和Ajax 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

一、显示隐藏

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

收藏

觉得还不错? 一键收藏
打赏
0
评论
31-动画效果

一、显示隐藏$("div").show();$("div").hide();参数为速度，毫秒单位，参数可以为：slow,normal,fast.默认400毫秒。回调函数$(document).ready(function(){ $('div').hide('slow',function(){ alert('显示完毕！'); });});
复制链接

扫一扫