JQ动画效果

迷南。 2022-08-01 14:47 262阅读 0赞

一看到动画效果我就激动的不行，很多人学JS可能都是为了特效，duang~duang~，好啦，下面我就记录下我在李炎恢老师视频中学的动画，在这里记下笔记  
首先我们常用的动画有，显示与隐藏，滑动与卷动，淡入与，自定义动画等。在下面还会记下方法如列队动画方法，那就开始咯

**首先是几个基本动画**

**显示和隐藏**

//.show()，可以传参控制速度等有slow nromal fast或者是毫秒数，还可以传入回掉函数
    $('div')click(function(){ 
        $('#div').show(1000,function(){ 
            alert('1');
        });//速度1秒完成,完全显示出来后弹窗
    })
    //.hide()
    $('div')click(function(){ 
        $('#div').hide('fast',function(){ 
            alert('2')
        });//速度1秒完成,隐藏后弹窗
    })
    //还有一些高级用法-调用自身
    //如果我们有多个地方需要动画，并且不希望他们同时显示，那我们就需要列队动画，让他们排着队的出来
    //列队动画,递归自调用
    $('div').click(function(){ 
        $('.div').first().show('fast',function testShow(){ 
            $(this).next().show('fast',testShow);
        })
    })
    $('div').click(function(){ 
        $('.div').last().hide('fast',function testShow(){ 
            $(this).prev().hide('fast',testShow);
        })
    })
    //如果是匿名函数怎么调用自身呢
    $('div').click(function(){ 
        $('.div').last().hide('fast',arguments.callee);
    })
    //下面就是组合按钮，toggle
    $('div').click(function(){ 
        $(div).toggle('fast');
    })

**滑动和滚动，参数和显示隐藏是一样的！！**

$('div').click(function(){ 
        $(div).slideUp('fast');
    })
    $('div').click(function(){ 
        $(div).slideDown('fast');
    })
    $('div').click(function(){ 
        $(div).slideToggle('fast');
    })

**淡入淡出**

$('div').click(function(){ 
        $(div).fadeOut('fast');
    })
    $('div').click(function(){ 
        $(div).fadeIn('fast');
    })
    $('div').click(function(){ 
        $(div).fadeToggle('fast');
    })
    $('div').click(function(){ 
        $(div).fadeTo('fast',0.3);//0-1之间 透明度到多少
    })

--------------------

**自定义动画**因为基础动画无法满足我们的需求，所以出现了自定义动画.animate()

$('.button').click(function(){ 
        $('#div').animate({
       //同步的
            width:'300px',
            height:'200px',
            opacity:0.5,
            fontSize:'50px'
        },1000,function(){ 
            alert('1');
        });
    })
    //当然我们也可以让位置变换，需要我们在CSS设置绝对定位，这样我们就可以使用top，left来控制位置
    $('.button').click(function(){ 
        $('#div').animate({
            left:'300px',
            top:'200px',
        },1000)
    })
    //上面的只有第一次点击才有效，如何实现多次点击都有效呢
    $('.button').click(function(){ 
        $('#div').animate({
            left:'+=300px',
            top:'+=200px',
        },1000)
    })
    //自定义队列动画，我们可以通过回掉函数不停地嵌套来实现但是太多容易乱
    $('.button').click(function(){ 
        $('#div').animate({
            width:'300px'
        },function(){ 
            $('#div').animate({
                height:'200px'
            })
        })
    })
    //还有一种方法就是连缀和顺序执行，但必须是同一个元素的基础上使用连缀和顺序排列
    $('.button').click(function(){ 
            $('#div').animate({width:'300px'})
                     .animate({height:'200px'})
                     .animate({opacity:0.5});
    })
    $('.button').click(function(){ //顺序执行
            $('#div').animate({width:'300px'});
            $('#div').animate({height:'200px'});
            $('#div').animate({opacity:0.5});
    })
    //如果作用在不同元素上，就不能一一执行，就会分别开始执行自己的，不过分别是列队动画
    $('.button').click(function(){ 
            $('#div').animate({width:'300px'});
            $('#div1').animate({height:'200px'});
            $('#div').animate({opacity:0.5});
    })
    //这样我们就需要使用队列动画方法才能实现多种元素的队列动画，先看一个CSS列子
    $('.button').click(function(){ 
        $('#div').slideUp('slow').slideDown('slow').css("backgroud","red");
    })//这样会出现什么效果呢，先执行CSS，之后在执行动画方法
    //queue方法便可以实现，但无法在后面直接家方法，类似连缀那种，但他有自己的传参实现
    $('.button').click(function(){ 
        $('#div')
                .slideUp('slow')
                .slideDown('slow')
                .queue(function(next){ 
                    $(this).css("backgroud","red");
                    next();
                })
                .hide('1000');
    });
    //这个函数也可以算队列里的长度
    $('#div').queue('fx').length//参数一定要传这个，每执行一个就会从队列中减少一个
    //清理运动，当有无限运动是满足某条件时用到这个
    $('.button').click(function(){ 
        $('#div')
                .slideUp('slow')
                .slideDown('slow',function(){ $(this).clearQueue()})//清理
                .queue(function(next){ 
                    $(this).css("backgroud","red");
                    next();
                })
                .hide('1000');
    });
    //有一个参数可以控制运动方式,但有很多需要插件，自带的有swing缓动和linear匀速，默认的是swing
    $('.button').click(function(){ 
        $('#div').animate({
            left:'800px'
        },'slow','swing')
    })

--------------------

**动画相关方法**  
很多时候我们需要正在运行的动画，JQ提供了.stop()方法  
.stop(clearQueue,gotoEnd) 第一个参数是一个布尔值，代表将未执行完的动画列表清空，第二个就是  
将正在执行的动画直接跳转到当前动画的末位置，注意不是最后一个动画的末位置  
**stop**

$('.button').click(function(){ 
        left:'800px'
    },1000)
    $('.stop').click(function(){ 
        $('#div').stop();//单纯停止
    })
    
    
    ----------
    
    
    $('.button').click(function(){ 
        $('#box').animate({left:'300px'})
                 .animate({bottom:'300px'})
                 .animate({top:'300px'})
                 .animate({right:'300px'})
    })
    $('.stop').click(function(){ 
        $('#div').stop();//如果是列队动画停止的话，会停止第一个列队动画，执行后面的列队动画
        $('#div').stop(true);//清除后面的动画，及完全停止默认值false
        $('#div').stop(true,true);//直接到该步动画的末位置
    })

**delay**延时

$('.button').click(function(){ 
        $('#box').animate({left:'300px'})
                 .animate({bottom:'300px'}).delay(2000)
                 .animate({top:'300px'})
                 .animate({right:'300px'})
    })

一个动画过滤器来判断哪个动画在运动 :animated

$('div').click(function(){ 
        $(':animated').css("background","red");
    })

**动画的全局属性**

$.fx.interval=13//运行的帧数，越小越流畅，默认13，但越小对性能要求越高
    $.fx.off=true;//关闭动画，用来兼容，用处比较少
    $('.button').click(function(){ 
        $('#div').toggle(1000)
    })