jQuery动画的几种效果

最新推荐文章于 2024-05-16 10:00:15 发布

我是你要找的bug

最新推荐文章于 2024-05-16 10:00:15 发布

阅读量416

点赞数

分类专栏： jquery 动画效果文章标签： jquery

本文链接：https://blog.csdn.net/XUYIGE/article/details/104401228

版权

jquery 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

动画效果

1 篇文章 0 订阅

订阅专栏

1、基本效果

1、show() 显示效果等同：display:block;
2、hide() 隐藏效果等同：display:none;
3、toggle() 显示隐藏切换类似于类别切换
上面三个方法不带参数直接显示隐藏切换带参（speed，easing，fn）fn指动画完成之后

<body>
<button class="btn">点击</button>
<div class="block" style="width: 200px;height: 200px; background-color:red "></div>
<script src="jquery/jquery.js"></script>
<script>
    $(function(){
        var count=0;
        $('.btn').click(function(){
            count++;
            if(count%2 == 0)
            {
                $('.block').show();
            }else{
                $('.block').hide();
            }
        });
    });
</script>
</body>

点击次数为基数次时div隐藏
在这里插入图片描述
点击次数为偶数次时div显示

上面两个效果可以合并为一个方法：toggle()

$(function(){
   $('.btn').click(function(){
       $('.block').toggle();
     });
 });

2、滑动效果

1、slideUp() 上滑
2、slideDown() 下滑
3、slideToggle() 上下滑切换
上面三个方法不带参数直接上滑下滑切换带参（speed，easing，fn）fn指动画完成之后

<body>
<button class="btn">点击</button>
<div class="block" style="width: 200px;height: 200px; background-color:red "></div>
<script src="jquery/jquery.js"></script>
<script>
    $(function(){
     var count=0;
        $('.btn').click(function(){
            count++;
          if(count%2==0){
              $('.block').slideDown(1000,'linear',function(){
                  console.log('动画完成');
              });

          }else{
              $('.block').slideUp(1000,'linear',function(){
                  console.log('动画完成');
              });

            }
        });

    });
</script>
</body>

上面代码等同于：

<script>
    $(function(){
         $('.btn').click(function(){
             $('.block').slideToggle(1000,'linear',function(){
                console.log('动画完成');
           });
      });
  });
</script>

3、淡入淡出

1、fadeIn() 淡入从无到有
2、fadeOut() 淡出从有到无
3、fadeTo() 透明度
4、fadeToggle() 切换
上三个方法可不带参数可带参（speed，easing，fn）fn指动画完成之后

<body>
<button class="btn">点击</button>
<div class="block" style="width: 200px;height: 200px; background-color:red "></div>
<script src="jquery/jquery.js"></script>
<script>
    $(function(){
       var count=0;
       $('.btn').click(function(){
      count++;
    if(count%2==0)
  {
    $(".block").fadeIn(2000,"linear",function (){
        console.log("动画执行完成");
    });

 else{
    $(".block").fadeOut(2000,"linear",function (){
       console.log("动画执行完成");
    })
   }
 });
});
</script>
</body>

上面代码等同于：

$(".block").fadeToggle(2000, "linear", function () {
      console.log("动画执行完成");
});

4、自定义动画

1、animate() 参数： params 属性 speed easing fn
2、stop() 停止当前正在执行的动画
3、delay(time) 延迟后续动画的执行
4、finish() 清除动画队列当前的队列动画立即完成
5、queue() 获取当前元素的动画队列 queue.length() 获取队列的长度

<body>
<button class="start">开始</button>
<button class="stop">停止</button>
<div class="block" style="width: 100px;height:100px; background-color:red "></div>
<script src="jquery/jquery.js"></script>
<script>
 $(function(){
        $('.start').click(function(){
            $('.block').delay(1000).animate({ //延迟1s执行动画
                marginLeft:300  //可添加多个属性  右移300px
                opacity: 0.3
            },1000,'linear',function(){
                console.log('动画完成1');
            }).animate({   
                marginTop:300    //下移300px
            },1000,function(){
                console.log('动画完成2');
            }).animate({
                marginLeft:0   
            },1000,'linear',function(){
                console.log('动画完成3');
            })
        })
    });
</script>
</body>

 $(".stop").click(function () {
        $(".block").stop(true);//stop的两个参数：是否清除队列   是否立即完成
        //stop里写 false就是默认不带参数的效果
        //写true  两个参数是  true false
        //写true  true  是清除队列  和立即完成当前动画
    });
    //finish  //清除队列   队列动画直接完成
    $(".btnfis").click(function () {
        $(".block").finish();
    });
});

我是你要找的bug

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery动画的几种效果

1、基本效果1、show() 显示效果等同：display:none;2、hide() 隐藏效果等同：display:block;3、toggle() 显示隐藏切换类似于类别切换上面三个方法不带参数直接显示隐藏切换带参（speed，easing，fn）fn指动画完成之后<body><button class...
复制链接

扫一扫

专栏目录