jQuery 实现简单的动画

s_kzn

于 2021-12-15 20:05:02 发布

阅读量1.2k

点赞数 3

文章标签： jquery javascript wpf

本文链接：https://blog.youkuaiyun.com/m0_61700036/article/details/121959039

版权

本文介绍了如何使用jQuery实现基本的动画效果，包括显示/隐藏、向上收缩/向下展开、淡入/淡出以及自定义动画。详细讲解了show(), hide(), toggle(), slideUp(), slideDown(), slideToggle(), fadeIn(), fadeOut(), fadeToggle()等方法的用法，并提到了自定义动画时如何设置CSS属性和控制动画速度。" 77443991,7102960,Excel 2016新增图表类型详解,"['数据可视化', 'Excel技巧', '数据分析', '办公软件']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 实现简单的动画

1、显示/隐藏

(1)显示：show(speed,[callback])

     speed:效果时长。可取的值：slow、fast、毫秒数
     callback:过渡完成后，所执行的方法名称

   (2)隐藏：hide(speed,[callback])

   (3)交替：toggle(speed,[callback]),若'显示'则'隐藏';若'隐藏'则显示

//搭建结构
 <button id="btn_show">显示图片</button>
        <button id="btn_hide">隐藏图片</button>
        <button id="btn_toggle">交替显示隐藏</button>
    <img src="../素材/im2.jpg" alt="" width="200" height="200" id="img1">

  
<script>
$('#btn_show').bind('click',function(){
                $('#img1').show(3000);  // 3秒之内显示
            })
             $('#btn_hide').bind('click', function () {
                $('#img1').hide(1000);  // 1秒之内隐藏
            })
             $('#btn_toggle').bind('click', function () {
                $('#img1').toggle();  // 显示或隐藏
            })
</script>

2、向上收缩/向下展开

   (1)收缩：slidUp(speed,[callback])

   (2)展开：slidDown(speed,[callback])

   (3)交替：slidToggle(speed,[callback])

 $('#btn_up').bind('click',function(){
                $('#img2').slideUp();  //展开
            })
             $('#btn_down').bind('click', function () {
                $('#img2').slideDown(); //收缩
            })
             $('#btn_slide').bind('click', function () {
                $('#img2').slideToggle();  //收缩展开交替
            })

3、淡入/淡出

   (1)淡入：fadeIn(speed,[callback])

   (2)淡出：fadeOut(speed,[callback])

(3)淡入淡出交替：fadeToggle(speed,[callback])

 $('#btn_fadeIn').bind('click', function () {
                $('#img3').fadeIn();   //淡入
            })
            $('#btn_fadeOut').bind('click', function () {
                $('#img3').fadeOut();  //淡出
            })
            $('#btn_fade').bind('click', function () {
                $('#img3').fadeToggle(2000);  //淡入淡出交替
            })

4、自定义动画

$(selector).animate(params,[speed],[easing],[fn])

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

$(function(){
            $('button').click(function(){
                $('.bt').animate({
                    left:200,
                    top:150,
                    opacity:0.4
                },1000)
            })
        })