JQuery动画

最新推荐文章于 2023-05-17 22:08:06 发布

Gckkoo

最新推荐文章于 2023-05-17 22:08:06 发布

阅读量365

点赞数

本文链接：https://blog.csdn.net/gckkoo/article/details/77268326

版权

动画

JQuery的动画有以下几种：

1.隐藏、显示

2.淡入、淡出

3.上滑、下滑

4.自定义动画

1显示、隐藏

Heid()：隐藏

<body>
    <div id="div1">

    </div>
   <button id="btnHide">消失</button>
</body>
<script type="text/javascript">
    $("#btnHide").click(function() {
        $("#div1").hide(10000);
    });
</script>

将高度、宽度、透明度改变为0，display为“none”

Show():显示

<body>
    <div id="div1">

    </div>
    <button id="btnShow">显示</button>
</body>
<script type="text/javascript">
    $("#btnShow").click(function() {
        $("#div1").show(10000);
    });
</script>

将高度、宽度、透明度显示为初始的css设置的样式，display为“block”

Toggle()：切换

<body>
    <div id="div1">

    </div>
    <button id="btnToggle">切换</button>
</body>
<script type="text/javascript">
    $("#btnToggle").click(function() {
        $("#div1").toggle();
    });
</script>

如果display为none时，点击就会变成black，如果display为black时，点击后则为none。

将高度、宽度、透明度改变为0，display为“none”

Show():显示

将高度、宽度、透明度显示为初始的css设置的样式，display为“block”

Toggle()：切换

如果display为none时，点击就会变成black，如果display为black时，点击后则为none。

2淡入、淡出

fadeIn():淡入

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

fadeOut()：淡出

将显示的样式改变其透明度（透明度从1到0），让他隐藏起来。

fadeToggle():淡入、淡出的切换

如果样式是隐藏的，则将它显示出来；如果样式是显示的，则将它隐藏起来。

fadeTo():固定其透明度（透明度在0到1之间）

3上滑、下滑

slideUp():上滑

将设置的高从初始边为0，然后隐藏它。

slideDown():下滑

先显示它，然后将设置的高度从0到初始。

slideToggle():上滑与下滑切换

如果元素是隐藏的，则先让它显示，然后把它的高度增加，如果元素是显示的话，先将高度减为0，,再让他隐藏

4动画

自定义动画

移动一个块到另一个位置

<body>
    <button>开始动画</button>
    <div id="p">

    </div>
</body>
<script type="text/javascript">
    $("button").click(function() {
        //设置多个css属性
        $("#p").animate({left:'300px',top:'300px'});
</script>

同时使用多个属性实现动画效果（移动位置和大小还有颜色）

<body>
    <button>开始动画</button>
    <div id="p">

    </div>
</body>
<script type="text/javascript">
    var p = $("#p");
        //设置相关属性
        $("#p").animate({
            left:'300px',
            width:'+=100px',
            height:'+=100px',
            opacity:'0.5'
        });
    });
</script>

改变预定义值来实现我们所需内容的显示或隐藏

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

Animate()中有三个参数

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

第二个参数是显示的速度（slow,fast 指定秒数）

第三个参数回调元素

<body>
    <button id="star">开始</button>
    <button id="end">结束</button>
    <div id="div1">

    </div>
</body>
<script type="text/javascript">
    var div = $("#div1");
    $("#star").click(function() {
       div.animate({height:'450px'},"slow");
       div.animate({width:'450px'},"slow");
        div.animate({height:'200px'},"slow");
       div.animate({width:'200px'},"slow");
    });
    $("#end").click(function (){
        div.stop(true);
    });
</script>

Gckkoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery动画

动画JQuery的动画有以下几种：1.隐藏、显示2.淡入、淡出3.上滑、下滑4.自定义动画1显示、隐藏Heid()：隐藏Heid()：隐藏消失 $("#btnHide").click(function() { $("#div1").hide(10000); });
复制链接

扫一扫