jQuery效果

我卢本伟没有开挂

于 2018-12-05 21:46:23 发布

阅读量180

点赞数

文章标签： jQuery效果 jQuery动画

本文链接：https://blog.csdn.net/weixin_43885123/article/details/84844135

版权

jQuery效果

基本
滑动
淡入淡出
自定义

基本

show()

显示隐藏的匹配元素。

这个就是 ‘show( speed, [callback] )’ 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
    <style>
        #div{
            width: 300px;
            height: 300px;
            background-color: orchid;
            display: none;
        }
    </style>
</head>
<body>
<div id="div"></div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#div").show("slow",function () {//slow normal fast
        $(this).text("Done")            //反馈
    })
</script>
</html>

hide()

隐藏显示的元素

这个就是 ‘hide( speed, [callback] )’ 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
    <style>
        #div{
            width: 300px;
            height: 300px;
            background-color: orchid;
        }
    </style>
</head>
<body>
<div id="div"></div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#div").hide("slow",function () {//slow normal fast
        console.log('hide完成')            //反馈
    })
</script>
</html>

hide( speed, [callback] )
以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。

toggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toggle</title>
    <style>
        #div{
            width: 400px;
            height: 400px;
            background-color: orchid;
        }
    </style>
</head>
<body>
<div id="div"></div>
<input type="button" value="按钮" id="btn">
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#btn").click(function () {
        $("div").toggle("slow",function () { //slow normal fast
            console.log("toggle is done")
        })
    })
</script>
</html>

滑动

slideDown(speed, [callback])

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slideDown</title>
    <style>
        #div{
            width: 200px;
            height: 300px;
            background-color: gold;
            display: none;
        }
    </style>
</head>
<body>
<div id="div"></div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#div").slideDown("slow",function () {
        console.log('slideDown is done')
    });
</script>
</html>

slideUp(speed, [callback])

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slideUp</title>
    <style>
        #div{
            width: 200px;
            height: 300px;
            background-color: gold;
        }
    </style>
</head>
<body>
<div id="div"></div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#div").slideUp("slow",function () {
        console.log('slideUp is done')
    });
</script>
</html>

slideToggle(speed, [callback])

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slideToggle</title>
    <style>
        #div{
            width: 200px;
            height: 300px;
            background-color: gold;
            /*display: none;*/
        }
    </style>
</head>
<body>
<div id="div"></div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#div").slideToggle("slow",function () {
        console.log('slideToggle is done')
    });
</script>
</html>

淡入淡出

fadeIn(speed, [callback])

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeIn</title>
    <style>
        #div{
            width: 200px;
            height: 300px;
            background-color: orange;
            display: none;
        }
    </style>
</head>
<body>
<div id="div"></div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#div").fadeIn("slow",function () {
        console.log('fadeIn is done')
    });
</script>
</html>

fadeOut(speed, [callback])

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeOut</title>
    <style>
        #div{
            width: 200px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="div"></div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#div").fadeOut("slow",function () {
        console.log('fadeOut is done')
    });
</script>
</html>

fadeTo(speed, opacity, [callback])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeTo</title>
    <style>
        #div{
            width: 200px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="div"></div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#div").fadeTo("slow",0.3,function () {
        console.log('fadeTo is done')
    });
</script>
</html>

自定义

animate(params, [duration], [easing], [callback])

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 “+=” 或 “-=” 来让元素做相对运动。

jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="div"></div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#div").animate({
        width:"500px",//宽度变为500px
        height:"400px",//高度变为400px
        opacity:"0.6",//透明度变为0.6
//        height:"toggle"//隐藏高度

    },3000,function () {
        console.log('动画完成')
    })
</script>
</html>

animate(params, options)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: mediumspringgreen;
            float: left;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div id="div1">这是div1</div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
        $("#div1").animate({width:'60%'},{queue:true,duration:3000})
            .animate({fontSize:'50px'},1000)
            .animate({height:'400px'},{queue:false,duration:3000})//queue为false使这条动画不进入队列，直接执行
            .animate({opacity:'0.3'},500)
</script>
</html>

stop([clearQueue], [gotoEnd])

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: mediumspringgreen;
            float: left;
            margin-left: 10px;
        }
        #btn{
            float: left;
        }
    </style>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div id="div1">这是div1</div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#div1").animate({width:'60%'},{queue:true,duration:3000})
        .animate({fontSize:'50px'},3000)
        .animate({height:'400px'},{queue:true,duration:3000})//queue为false使这条动画不进入队列，直接执行
        .animate({opacity:'0.3'},3000);
    $("#btn").click(function () {
        $("#div1").stop(false,true)
        //第一个true会立刻停止所有动画  false只停止当前进行的动画，之后进行下一个动画
        //第二个true会立刻执行完当前进行的动画，然后进行下一个   false为默认值
    })
</script>
</html>

delay(duration, [queueName])

设置一个延时来推迟执行队列中之后的项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: mediumspringgreen;
            float: left;
            margin-left: 10px;
        }
        #btn{
            float: left;
        }
    </style>
</head>
<body>
<div id="div1">这是div1</div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    $("#div1").animate({width:'60%'},{queue:true,duration:1000})
        .delay(3000)//在此延时3秒再进行下一个动画
        .animate({fontSize:'50px'},1000)
        .delay(3000)//在此延时3秒再进行下一个动画
        .animate({height:'400px'},{queue:true,duration:1000})//queue为false使这条动画不进入队列，直接执行
        .animate({opacity:'0.3'},1000)
</script>
</html>

我卢本伟没有开挂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery效果

jQuery效果基本show()hide()toggle滑动slideDown(speed, [callback])slideUp(speed, [callback])slideToggle(speed, [callback])淡入淡出fadeIn(speed, [callback])fadeOut(speed, [callback])fadeTo(speed, opacity, [callbac...
复制链接

扫一扫