jQuery学习——jQuery效果

最新推荐文章于 2022-06-15 10:06:20 发布

balabalapd

最新推荐文章于 2022-06-15 10:06:20 发布

阅读量232

点赞数 1

本文链接：https://blog.csdn.net/WLkkjm/article/details/89191844

版权

一、jQuery学习——jQuery效果

1.显示和隐藏效果：hide()和show()

<1> hide()方法:是把指定元素隐藏;

show()方法:是把指定元素显示出来.

<2>效果练习：实现jquery动画效果隐藏与显示

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#button1").click(function (){
                $("p").hide(2000)
            })
            $("#button2").click(function (){
                $("p").show(2000,function (){
                    alert("恭喜你，显示完成")
                })
            })
            $("#button3").click(function (){
                $("p").toggle(1000,function (){
                    $("p").css({color:"blue"})
                })
            })
        })
    </script>
</head>
<body>
<p> jquery动画效果隐藏与显示</p>
<input type="button" value="隐藏" id="button1" >
<input type="button" value="显示" id="button2" >
<input type="button" value="按钮" id="button3" >

</body>
</html>

●代码实现：

点击“隐藏”和“显示”效果

点击“隐藏”→→→ 点击“显示”↓↓↓

点击“按钮”效果

点击“按钮”→→→ 再点击“按钮”→→→

●语法

①$(selector).hide(speed,callback)

②$(selector).show(speed,callback)

③speed参数规定隐藏和显示的速度，取值为“slow”，“fast”，毫秒(1秒等于1000毫秒).

callback参数是隐藏或显示完成后执行的函数名称

④$(selector).toggle(speed,callback)

2.滑动效果：slide()

<1> slide()方法：slideUp()方法是把指定元素伸展；slideDown()方法是把指定元素压缩

<2>效果练习：点击我，滑动显示或者隐藏面板

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <style>
        #slide,#panel {
            padding: 5px;
            text-align: center;
            background-color: peachpuff ;
            border: 1px solid burlywood ;
        }
        #panel{
            display: none;
            padding: 40px;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("#slide").click(function (){
                $("#panel").slideToggle()
            })
        })
    </script>
</head>
<body>
<div id="slide">点击我，滑动显示或者隐藏面板</div>
<div id="panel">hello</div>
</body>
</html>

●代码实现：

点击“点击我”↓↓↓

3.用于创建自定义的动画：animate()

<1>$(selector).animate({params},speed,callback)

params参数定义形成动画的css属性，可选参数和上面的几个方法相同

<2>效果练习：animate

①通过animate，把<div>元素向右移动200px

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function (){
                $("div").animate({left:"200px"},1000,function (){
                    $("div").css({background:"pink"})
                })
            })
        })
    </script>
</head>
<body>
<button>开始动画</button>
<p></p>
<div style="background-color: red;width: 100px;height: 100px;position:absolute"></div>
</body>
</html>

●代码实现：

点击“开始动画”→→→

●注：默认情况下，所有的HTML元素有一个静置的位置，且是不可移动的，如果需要改变，那么需将元素的position属性设置为：absolute，relative，fixed

②通过animate，使用相对值

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#button").click(function (){
                $("div").animate({
                    left:"200px",opacity:'0.5',height: '160px',width: '160px'
                })
            })
        })
</head>
<body>
<input type="button" value="开始动画" id="button" >
<div style="background-color: red;width: 100px;height: 100px;position:absolute"></div>
</body>
</html>

●代码实现：

点击“开始动画”→→→

●注：几乎可以用animate()方法来操作所有的css属性，但需要记住，当使用animate()方法的时候，必须使用camel标记法书写所有的属性名，eg:css.background color 在animate中：backgroundColor

③通过animate，实现开始动画和暂停动画

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#button").click(function (){
                var div = $("div")
                div.animate({height:"160px",opacity:0.5},5000)
            })
            $("#button1").click(function (){
                $("div").stop()
            })
            //stop()用于在动画完成前对它进行暂停
        })
    </script>
</head>
<body>
<input type="button" value="开始动画" id="button" >
<input type="button" value="暂停动画" id="button1" >
<div style="background-color: red;width: 100px;height: 100px;position:absolute"></div>
</body>
</html>

●代码实现：

点击“开始动画” ↓↓↓

点击“暂停动画” 再点击“开始动画”

4.jQuery---链(Chaining)

通过jQuery，可以把方法链接到一起，Chaining允许我们在一条语句中运行多个jQuery方法(在相同的元素上)

●语法

①$(“#p1”).css({'color':"red"}).slideUp(1500).slideDown(1500).animate({backgroundColor:"bule"},1000)

意思：#p1元素首先会变红，然后向上以1.5秒的速度移动，然后向下以1.5秒的速度移动，最后将背景颜色变为蓝色

②如果不同链，写法是这样的：

$(“#p1”).css({'color':"red"})

$(“#p1”).slideUp(1500)

$(“#p1”).slideDown(1500)

$(“#p1”).animate({backgroundColor:"bule"},1000)

③通过Chaining的优点：浏览去不用多次去查找相同的优点

balabalapd

关注

1
点赞
踩
0

收藏

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

一、jQuery学习——jQuery效果1.显示和隐藏效果：hide()和show() <1>hide()方法:是把指定元素隐藏; show()方法:是把指定元素显示出来. <2>效果练习：实现jquery动画效果隐藏与显示●代码如下：<!DOCTYPE html><html lang="en"...
复制链接

扫一扫