jQuery动画效果_jquery非线性动画-CSDN博客

本文链接：https://blog.csdn.net/weixin_44492275/article/details/107104560

jQuery效果

jQuery显示和隐藏动画

<script>
    $(function(){
        $('button').eq(0).click(function(){  //在通过$('button')获取的所有的button中通过eq(0)确定为第一个并且通过click绑定事件
            //一个参数时 括号里传入的是时间 单位为毫秒 
            // $('div').show(1000);//show是显示动画

            //两个参数时 第一个为时间  第二个为函数添加在显示完毕时额外的功能
            //他会让原本隐藏的元素按时间慢慢显示
            $('div').show(1000,function(){
                alert('xxxx')
            });
            
        })
        $('button').eq(1).click(function(){
            //一个参数时 括号里传入的是时间 单位为毫秒
            // $('div').hide(1000);//hide是隐藏动画  

            //两个参数时 第一个为时间  第二个为函数添加在隐藏完毕时额外的功能
            //他会让原本显示的元素按时间慢慢隐藏 
            $('div').hide(1000,function(){
                alert('啊啊啊啊')
            });

        })
        $('button').eq(2).click(function(){
            //一个参数时 括号里传入的是时间 单位为毫秒
            $('div').toggle(1000);//show是切换动画 如果为显示就切换为隐藏 是隐藏就切换为显示
           
            //两个参数时 第一个为时间  第二个为函数添加在切换完毕时额外的功能 
            $('div').toggle(1000,function(){
                alert('呜呜呜呜');
            });
        })
    })
</script>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>

jQuery展开和收起动画

<script>
    $(function(){
        $('button').eq(0).click(function(){ 
            $('div').slideDown(1000,function(){//slideDown显示动画 是从上到下展开
            //其他同理显示show
                alert('xxxx')
            });
        })
        $('button').eq(1).click(function(){
            $('div').slideUp(1000,function(){//slideUp隐藏动画 是从下到上收起
            //其他同理显示hide
                alert('xxxx')
            });
        })
        $('button').eq(2).click(function(){
            $('div').slideToggle(1000,function(){//slideToggle切换动画 展开就收起 收起就展开
            //其他同理显示toggle
                alert('xxxx')
            });
        })
    })
</script>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>

jQuery children方法

jQuery中的children方法是找指定元素的子元素在括号中传入参数为找跟参数相同名字的子元素

元素.children('字符串值，包含匹配元素的选择器表达式。');

jQuery stop方法

stop方法直接结束除了当前的动画之前的所有动画防止用户快速移动鼠标触发多个动画逐个执行带来的操作延迟

stop不管之前的动画有没有执行完还是根本没执行都直接停掉移除掉

元素.stop();

jQuery淡入淡出动画

<script>
    $(function(){
        $('button').eq(0).click(function(){
            $('div').fadeIn(1000,function(){
                alert('x')
            })
            //淡入 fadeIn
            //一个参数时 括号里传入的是时间 单位为毫秒 
            //两个参数时 第一个为时间  第二个为函数添加在淡入完毕时额外的功能
        });
        $('button').eq(1).click(function(){
            $('div').fadeOut(1000,function(){
                alert('y')
            })
            //同理 淡出   fadeOut
        });
        $('button').eq(2).click(function(){
            $('div').fadeToggle(1000,function(){
                alert('a')
            })
            //同理 切换  fadeToggle
        });
        $('button').eq(3).click(function(){
            $('div').fadeTo(1000,0.5,function(){
                alert('a')
            })
            //淡入到 一个指定的程度
            //第一个参数 时间    第二个为淡入到什么程度 1为完全不透明 0为完全透明  第三个函数
        });
    })
</script>
<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>淡入到</button>
    <div></div>
</body>

jQuery自定义效果动画

animate方法

<script>
    $(function(){
        $('button').eq(0).click(function(){
            //animate方法用于自定义效果
            //三个参数时： 三个参数会使用默认的缓动'swing'的 执行节奏 
                //第一个参数是对象，在对象中修改的属性会自带动画效果(就相当于css中写的是动画开始的状态 而这个对象中写的是对某些css样式的修改是动画结束的状态)  
                //第二个是时间  第三个是函数
            $('.one').animate({marginLeft:500},5000,function(){
                alert('动画执行完毕');
            });
            
            //四个参数时 :可以设置执行节奏
                //第一个参数是对象，在对象中修改的属性会自带动画效果(就相当于css中写的是动画开始的状态 而这个对象中写的是对某些css样式的修改是动画结束的状态)  
                //第二个是时间  第三个是设置执行节奏  第四个是函数
                //linear表示匀速  'swing'表示缓动
            $('.two').animate({marginLeft:500},5000,'linear',function(){
                alert('动画执行完毕');
            });   
            
        })
        $('button').eq(1).click(function(){
            $('.one').animate({width:"+=100"},1000,function(){
                //在animate的第一个参数 对象中的属性的值用字符串并且格式是+=数字 就会逐渐累加数值
                alert('动画执行完毕');
            });
        })
        $('button').eq(2).click(function(){
            $('.one').animate({width:'hide'},1000,function(){
                //在animate的第一个参数 对象中的属性的值用字符串并且是个关键字 就会执行关键字他本身的功能
                alert('动画执行完毕');
            });
        })
    })
</script>
<body>
    <button>属性操作</button>
    <button>累加属性</button>
    <button>关键字</button>
    <div class="one"></div>
    <div class="two"></div>
</body>

jQuery的stop和delay方法

<script>
    $(function(){
        $('button').eq(0).click(function(){
            //$('.one').animate({width:500,height:500},1000);//animate中的对象中的所有修改css样式的属性会在动画中同时进行
            //想要不同时进行就分成两个动画
            // $('.one').animate({width:500},1000).animate({height:500},1000);
            //想要不同时进行并且两个动画之间还有间隔 分成两个动画 动画之间加上delay动画延迟
            //delay 就是用于告知系统 多个动画之间的间隔时间是多久和多久开始第一个动画
            //$('.one').animate({width:500},1000).delay(2000).animate({height:500},1000);
            $('.one').animate({width:500},1000).animate({height:500},1000).animate({height:100},1000).animate({width:100},1000);
        })
        $('button').eq(1).click(function(){
            //$('div').stop(false);//stop的括号内的 不传入参数，参数传入的为false 和 传入false,false 时都是会停止当前执行的动画 不会对后面的动画产生影响
            
            // $('div').stop(true);
            //stop的括号内的传入的参数为true 会停止当前以及后面所有的动画
            
            // $('div').stop(true,true);
            //传入的为true,true 会立即完成当前的动画 然后停止后面所有的动画
            
            // $('div').stop(true,false);
            //传入的为true,false 会停止当前以及后面所有的动画
            
            $('div').stop(false,false);
            //传入的为false,true 会立即完成当前的动画 然后执行后面的动画
        })

    })
</script>
<body>
    <button>开始动画</button>
    <button>停止动画</button>
    <div class="one"></div>
    <div class="two"></div>