jquery的一些动画效果

动画效果是jQuery吸引人的地方之一。通过jQuery的动画方法，能够轻松地为网页添加视觉效果，给用户一种全新的体验。jQuery动画是一个大的系列，本文将详细介绍jQuery的三种常见动画效果——显隐效果、高度变化及淡入淡出！

1、基本效果（显示与隐藏）

1）show() ：显示
2）show(speed,[callback]) ：以动画效果显示
3）hide() ：隐藏
4）hide(speed,[callback]) ：以动画效果隐藏
5）toggle() ：切换显示或隐藏
6）toggle(switch) ：显示或隐藏，如果switch为true代表显示，false隐藏（了解）
7）toggle(speed,[callback]) ：以动画效果显示或隐藏

参数说明：
speed：动画的速度，可以是"slow"（缓慢）, “normal”（正常）, “fast”（快速）
也可以理解为动画的持续时间，单位为毫秒。
[callback]：动画完成时所触发的回调函数

  <div id="box">
        <img src="img/1.jpg" alt="">
    </div>
    <button type="button" id="hide">隐藏图片</button>
    <button type="button" id="show">显示图片</button>
    <button type="button" id="tog">隐藏/显示图片</button>
</body>
    <script src="js/jquery.js"></script>
    <script>
        //基本特效    改变了宽高  透明度
        $('#hide').click(function(){
            $('#box').hide(4000,function(){
                alert("我老婆");
            });
        })
        $('#show').click(function(){
            $('#box').show(4000,function(){
                alert("我老婆");
            });
        })
        //切换  隐藏和显示中切换
        $('#tog').click(function(){
            $('#box').toggle(4000,function(){
                // alert("我老婆");
            });
        })
    </script>

2、滑动效果（上下滑动）

• slideDown(speed,[callback]) ：以动画效果向下滑动
• slideUp(speed,[callback]) ：以动画效果向上滑动
• slideToggle(speed,[callback]) ：以动画效果滑动

参数说明：
speed：动画的持续时间，单位为毫秒
[callback]：动画完成时所触发的回调函数

3、淡入淡出效果

• fadeIn(speed,[callback]) ：以动画效果淡入
• fadeOut(speed,[callback]) ：以动画效果淡出
• fadeTo(speed,opacity,[callback]) ：设置元素的透明度 0（全透明）-1（不透明）之间

参数说明：
speed：动画的持续时间
opacity：元素的透明度，0（全透明）1（不透明）

 <div id="box">
        <img src="img/1.jpg" alt="">
    </div>
    <button type="button" id="hide">隐藏图片</button>
    <button type="button" id="show">显示图片</button>
    <button type="button" id="tog">隐藏/显示图片</button>
</body>
    <script src="js/jquery.js"></script>
    <script>
        //渐变特效
        //渐变隐藏   
        $('#hide').click(function(){
            $('#box').fadeOut(4000,function(){
                alert("我老婆");
            });
        })
        $('#show').click(function(){
            $('#box').fadeIn(4000,function(){
                alert("我老婆");
            });
        })
        //切换  隐藏和显示中切换
        $('#tog').click(function(){
            $('#box').fadeToggle(4000,function(){
                // alert("我老婆");
            });
        })
    </script>

效果 ：opacity：元素的透明度，0（全透明）1（不透明） （淡入淡出）

4、自定义动画效果

animate(params,[speed], [fn]) ：创建自定义动画

参数说明：
params：json对象，动画参数
[speed]：动画的持续时间
[fn]：动画完成时所触发的回调函数

 <div id="box">
        <img src="img/1.jpg" alt="">
    </div>
    <button type="button" id="hide">隐藏图片</button>
    <button type="button" id="show">显示图片</button>
    <button type="button" id="tog">自定义效果</button>
</body>
    <script src="js/jquery.js"></script>
    <script>
        //自定义特效
        $('#tog').click(function(){
            $('#box').animate({
                'width':200,
                'left':'+=50',
                'height':'toggle',
                'border':'1px solid red',
                
            },10000)
        })

360开机动画！！！