jQuery简单动画操作

01/18 10:00
阅读数 26

我们都知道动画的功能,今天介绍几个简单的动画的操作
一、动画——显示跟隐藏
首先先写一个简单的页面

    <button id="showbox">显示</button>
    <button id="hidebox">隐藏</button>
    <button id="showhidebox">显示或隐藏</button>

    <div id="box"></div>

三个按钮,点击改变div的状态,简单给div设置个宽高跟背景色,方便我们观看效果
在这里插入图片描述
思路:
隐藏hide() 显示show() 显示或隐藏 toggle()
参数:
动画时间(“slow”,“normal”, “fast”) / 毫秒 ,
切换效果 默认是"swing",可用参数"linear" ,
动画执行完成的回调函数
原理:动画原理width 、height、opacity、
margin、 padding 、 overflow:hidden ;
效果:display=“none” / display=""









下面是JQ代码

       //隐藏
        $("#hidebox").click(function(){
   
   
            $("#box").hide(2000,function(){
   
   
                console.log("--隐藏 动画完成---")
            });
        })

        //显示
        $("#showbox").click(function(){
   
   
            $("#box").show(2000,function(){
   
   
                console.log("--显示 动画完成---")
            });
        })

        //显示或隐藏
        $("#showhidebox").click(function(){
   
   
            $("#box").toggle(2000,function(){
   
   
                console.log("-- 动画完成---")
            });
        })

二、动画——滑入跟滑出
首先也是先写一个简单的页面

	<button id="one">滑入</button>
    <button id="two">滑出</button>
    <button id="three">滑入或滑出</button>

    <div id="box"></div>

三个按钮,点击改变div的状态,简单给div设置个宽高跟背景色,方便我们观看效果
在这里插入图片描述

思路:
滑入slideDown() 滑出slideUp() 滑入或滑出slideToggle()
动画过程原理: height 、 margin-top, margin-bottom 、padding-top、 padding-bottom
效果:display:none / diplay:""


下面是JQ代码

		$("#two").click(function(){
   
   
            $("#box").slideUp(10000);
        })

        $("#one").click(function(){
   
   
            $("#box").slideDown(10000);
        })

        $("#three").click(function(){
   
   
            $("#box").slideToggle();
        })

三、动画——淡入跟淡出
首先也是先写一个简单的页面

	<<button id="one">淡入</button>
    <button id="two">淡出</button>
    <button id="three">淡入或淡出</button>
    <button id="four">到透明度0.5</button>


    <div id="box"></div>

四个按钮,点击改变div的状态,简单给div设置个宽高跟背景色,方便我们观看效果
在这里插入图片描述
思路:
淡入 fadeIn() 淡出 fadeOut() 淡入或淡出 fadeToggle() 到指定的透明度fadeTo()
动画过程原理: opacity
效果:display:none / diplay:""




下面是JQ代码

		$("#two").click(function(){
   
   
            $("#box").fadeOut(3000) //透明度 0
        })

        $("#one").click(function(){
   
   
            $("#box").fadeIn(3000)// //透明度 1
        })


        $("#three").click(function(){
   
   
            $("#box").fadeToggle(3000)// 
        })

        $("#four").click(function(){
   
   
            $("#box").fadeTo(2000,0.5)// 
        })

当然 既然是用jQuery做的效果,在页面别忘了引用jQuery外部文件~

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部