程序博客网 > linux vi文本编辑器

JQuery 动画

来源：互联网发布：linux vi文本编辑器编辑：程序博客网时间：2024/06/08 16:44

JQuery 动画

1 显示、隐藏、

Hide（）：隐藏；将高度、宽度、透明度变为0 初始！Display为none；

Show（）；显示；将高度、宽度、透明度变为初始值css样式的时候，display为“block”；

Toggle（）；切换；如果display为none的时候，点击一下变成block；反之变成none；

   <script src="../jquery-3.2.1.min.js"></script>
    <style>
        #div1{
            height: 100px;
            width: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
   <div id="div1"></div>
<button onclick="btnHide()">样式</button>
</body>
<script>
    //获取元素
    var div1 =document.getElementById("div1");
    var timer;
    var width =200;
    var height =200;
    var opacity = 1; //初始值
    function btnHide(){
        timer =setInterval(fun,100);
    }
    function fun(){
        width -=5;
        height -=5;
        opacity -=0.025;
        div1.style.width = width+"px";
        div1.style.height = height+"px";
        div1.style.opacity = opacity;
        if(width<=0||height<=0){
            clearInterval(timer);
            div1.style.display ="none";
        }
    }
</

和jQuery和Js实现同样效果

<script>
   $("button").click(function(){
      $("#div1").hide(30000);//三种参数 slow fast 毫秒数3000 选一
   });
</script>

2淡入、淡出

<script src="../jquery-3.2.1.min.js"></script>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            display: none;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<button id="btnFadeIn">我是小样我就这样</button>
<button id="btnFadeOut">我是小样我就这样</button>
<button id="btnFadeToggle">我是小样我就这样</button>
<button id="btnFadeTo">我是小样我就这样</button>
</body>
<script>
    $("#btnFadeIn").click(function(){
       $("#div1").fadeIn(4000);
    });
    $("#btnFadeOut").click(function(){
        $("#div1").fadeOut(4000);
    });
    $("#btnFadeToggle").click(function(){
        $("#div1").fadeToggle(3000);
    });
    $("#btnFadeTo").click(function(){
        $("#div1").fadeTo(5000,0.4);
    });
</script>
</

fadeIn（）；淡入；将隐藏的样式通过改变其透明度透明度从0到1，让它显示出来。

fadeOut（）：淡出；将显示的样式通过其改变透明度从1到0，让它隐藏起来；

fadeToggle（）：切换；淡入淡出的切换，

如果样式隐藏了，则将它显示出来，

如果样式显示了，则将它隐藏起来，

fadeTo（）：固定其透明度透明度在0到1之间；

3上滑、下滑

SlideUp（）：上滑；将设置的高度从初识变为0，然后隐藏它；

SlideDown（）；下滑；先显示它，然后再将设置的高度从0变为初始值；

SlideToggle（）；上滑与下滑的切换，

如果元素是隐藏的，则让它显示，并把它的高度增加，

如果元素是显示的话，先将高度减为0，在隐藏它；

  <script src="../jquery-3.2.1.min.js"></script>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<button id="btnSlideUp">上滑</button>
<button id="btnSlideDown">下滑</button>
<button id="btnSlideToggle">切换</button>
</body>
<script>
   $("#btnSlideUp").click(function(){
    $("#div1").slideUp(800,function(){
        alert("我在上滑");//回调函数
    });
});

    $("#btnSlideDown").click(function(){
       $("#div1").slideDown(800);
    });
    $("#btnSlideToggle").click(function(){
        $("#div1").slideToggle(800);
    });
</script>

4 滑动

自定义动画

移动一个块到另一个块，同时使用多个属性实现动画效果，（移动位置、颜色透明度、大小的改变！）

   <script src="../jquery-3.2.1.min.js"></script>
    <style>
        #p{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
        }
    </style>
</head>
<body>
<button>开始动画</button>
<div id="p"></div></body><script>
    var p = $("#p");
  $("button").click(function(){
      //设置多个css样式
     $("#p").animate({left:'200px',top:'200px'});
      //设置相关属性
     $("#p").animate({
         left:'80px',
         top:'80px',
         width:'+=100px',
         height:'+=100px',
         opacity:'0.09',
     });

  });
</script>

改变与定义值来实现我们所需要的内容的显示隐藏！

//预定义值
$("#p").animate({
//height:'hide',
height:'toggle'
});

.Animate()中三个参数；

第一个参数是需要改变的样式；

第二个参数就是现实的速度（slow，fast，指定毫秒数）

<div id="div"></div>
<button id="start">开始按钮</button>
<button id="stop">结束按钮</button>
</body>
<script>
    var div = $("div");
    $("#start").click(function(){
        div.animate({height:'300px'},"slow");
        div.animate({ width:'300px'},"slow");
        div.animate({ width:'100px'},"slow");
        div.animate({height:'100px'},"slow");
            });
    $("#stop").click(function(){
        div.stop(true);
    });
</script>

两个参数

Start（）

Stop（）

阅读全文

0 0

linux vi文本编辑器

linux vi文本编辑器

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子求索杂志社投稿上下求索的意思屈原吾将上下而求索在增长的迷雾中求索求职信求职简历求职信范文求职模板求职信格式求职信英文求职自荐信求职信300字英语求职信求职图片求职信300 求职软件求职高手求职补贴英文求职信求职技巧广州求职佛山求职求职问题求职面试北京求职求职公司求职求职求职的求职自我介绍荆门招聘求职求职简历范文华人街招聘求职 50岁到55岁求职保安门卫求职信怎么写求职简历自我评价求职创业补贴绍兴e网招聘求职求职简短自我评价求职个人简历模板个人求职简历模板海盐论坛求职招聘