jQuery效果

最新推荐文章于 2022-04-01 15:29:26 发布
原创 最新推荐文章于 2022-04-01 15:29:26 发布 · 701 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了jQuery中实现元素隐藏、显示、淡入淡出、滑动及自定义动画的方法，并提供了详细的示例代码。

1.jQuery效果－隐藏和显示

我们可以通过jQuery的hide()和show()方法来隐藏和显示HTML元素
语法如下

$(selector).hide(speed,callback);
\$(selector).show(speed,callback);

其中speed参数为可选参数，用其来确定隐藏／显示的速度，可以取以下值’slow’，’fast’，或毫秒
callback也为可选参数，它为操作完成后所执行的回调函数

无参的hide()，show()方法实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('.hide').click(function () {
                $('p').hide();
            });
            $('.show').click(function () {
                $('p').show();
            });
        });
    </script>
</head>
<body>
    <p>如果点隐藏我就会消失，点显示我就会出来</p>
    <button class="hide" type="button">隐藏</button>
    <button class="show" type="button">显示</button>
</body>
</html>

我们也可以使用toggle()方法来切换hide()和show()方法

toggle实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('p').toggle();
            });
        });
    </script>
</head>
<body>
    <p>切换</p>
    <button type="button">切换</button>
</body>
</html>

2.jQuery效果-淡入淡出

通过jQuery我们可以实现元素的淡入淡出效果
jQuery拥有下面四种fade方法

.fadeIn()
.fadeOut()
.fadeToggle()
.fadeTo()

(1)fadeIn
fadeIn的语法如下

$(selector).fadeIn(speed,callback);

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.div1').fadeIn();
                $('.div2').fadeIn('slow');
                $('.div3').fadeIn(3000);
            });
        });
    </script>
</head>


    <button type="button">点击这里使三个矩形淡出</button>
    <br><br>
    <div class="div1" style="width: 80px;height: 80px;display: none;background-color: red;">

    </div><br>
    <div class="div2" style="width: 80px;height: 80px;display: none;background-color: green;">

    </div><br>
    <div class="div3" style="width: 80px;height: 80px;display: none;background-color: blue;">

    </div><br>
</body>
</html>

(2)fadeOut
fadeOut用于淡出可见元素

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.div1').fadeOut();
                $('.div2').fadeOut('slow');
                $('.div3').fadeOut(3000);
            });
        });
    </script>
</head>


    <button type="button">点击这里使三个矩形淡出</button>
    <br><br>
    <div class="div1" style="width: 80px;height: 80px;background-color: red;">

    </div><br>
    <div class="div2" style="width: 80px;height: 80px;background-color: green;">

    </div><br>
    <div class="div3" style="width: 80px;height: 80px;background-color: blue;">

    </div><br>
</body>
</html>

(3)fadeToggle
fadeToggle方法可以在fadeIn()与fadeOut()方法之间进行切换

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.div1').fadeToggle();
                $('.div2').fadeToggle('slow');
                $('.div3').fadeToggle(3000);
            });
        });
    </script>
</head>


    <button type="button">点击这里使三个矩形淡入淡出</button>
    <br><br>
    <div class="div1" style="width: 80px;height: 80px;background-color: red;">

    </div><br>
    <div class="div2" style="width: 80px;height: 80px;background-color: green;">

    </div><br>
    <div class="div3" style="width: 80px;height: 80px;background-color: blue;">

    </div><br>
</body>
</html>

(4)fadeTo
fadeTo()方法允许渐变为给定的不透明度

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.div1').fadeTo('slow',0.15);
                $('.div2').fadeTo('slow',0.4);
                $('.div3').fadeTo('slow',0.7);
            });
        });
    </script>
</head>


    <button type="button">点击这里使三个矩形淡出</button>
    <br><br>
    <div class="div1" style="width: 80px;height: 80px;background-color: red;">

    </div><br>
    <div class="div2" style="width: 80px;height: 80px;background-color: green;">

    </div><br>
    <div class="div3" style="width: 80px;height: 80px;background-color: blue;">

    </div><br>
</body>
</html>

3.jQuery效果-滑动

我们可以在元素上创建滑动效果
jQuery拥有以下滑动方法

.slideDown()
.slideUp()
.slideToggle()

slideToggle实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.div1').fadeTo('slow',0.15);
                $('.div2').fadeTo('slow',0.4);
                $('.div3').fadeTo('slow',0.7);
            });
        });
    </script>
</head>


<button type="button">点击这里使三个矩形淡出</button>
<br><br>
<div class="div1" style="width: 80px;height: 80px;background-color: red;">

</div><br>
<div class="div2" style="width: 80px;height: 80px;background-color: green;">

</div><br>
<div class="div3" style="width: 80px;height: 80px;background-color: blue;">

</div><br>
</body>
</html>

4.jQuery效果-动画

jQuery的animate()方法用于创建自定义动画
语法

$(selector).animate({params},speed,callback);

.必须的params参数定义形成动画的CSS属性
.可选的speed参数规定效果的时长
.可选的callback参数是动画完成后执行的回调

(1)下面的例子演示animate()方法的简单应用，它把div元素移动到左边，知道left属性等于250像素为止
实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('div').animate({left:'300px'},4000);
            });
        });
    </script>
</head>
<body>

    <button type="button">开始动画</button>
    <br><br>
    <div style="background: #98bf21;height: 100px;width: 100px;position: absolute;">
    </div>
</body>
</html>

(2)生成动画的过程中我们可以使用多个属性
实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('div').animate({
                    heigth:'150px',
                    width:'150px',
                    opacity:'0.5',
                    left:'300px'},4000);
            });
        });
    </script>
</head>
<body>

    <button type="button">开始动画</button>
    <br><br>
    <div style="background: #98bf21;height: 100px;width: 100px;position: absolute;">
    </div>
</body>
</html>

(3)队列功能
jQuery提供针对动画的队列功能
实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                var div = $('div');
                div.animate({height:'300px',opacity:'0.4'},'slow')
                div.animate({width:'300px',opacity:'0.8'},'slow')
                div.animate({height:'100px',opacity:'0.4'},'slow')
                div.animate({width:'100px',opacity:'0.8'},'slow')
            });
        });
    </script>
</head>
<body>

    <button type="button">开始动画</button>
    <br><br>
    <div style="background: #98bf21;height: 100px;width: 100px;position: absolute;">
    </div>
</body>
</html>
前端必知必会-jQuery 效果-滑动和动画
qq_24018193的博客
09-24 1818
您甚至可以将属性的动画值指定为“show”、“hide”或“toggle”：示例});});本文介绍了jQuery 效果-滑动和动画的使用，如有问题欢迎私信和评论。
jQuery动画效果
weixin_57762664的博客
04-21 1393
1.jQuery 动画效果分别有几种，例如基本效果、滑动效果、淡入淡出效果、自定义效果等等2.基本效果有show、hide、toggle方法。Show();显示隐藏中的元素。传入参数，根据参数决定动画的时间Hide();隐藏元素。Toggle();可以实现元素显示与隐藏的效果(无动画效果)，详细如下图 3.滑动效果有slideDown、slideUp、slideToggle方法。slideDown();下拉的动画效果。slideUp();上卷的动画效果。slideToggle();下拉上卷的动画效果，详细如
JQuery效果
zxx18208167905的博客
07-20 237
1、隐藏\显示（hide\show toggle) 语法：$(selector).hide(speed,callback); 2、淡入\淡出\两者之间切换\不透明度0-1 分别为fade in、fade out 、fade toggle 、fade to 语法：$(selector).fade in(speed,callback); speed可以为slow fast 毫秒 $("#d...
jquery 效果
03-31
NULL 博文链接：https://loushi135.iteye.com/blog/1322974
jquery效果
老杨的博客
09-05 444
1、基本效果 l  show()：显示 l  show(speed,[callback]) ：以动画方式显示 n  speed：动画持续多少毫秒 n  callback：可选项 回调函数 动画执行完后执行的函数 l  hide()：隐藏 l  hide(speed,[callback]) ：以动画的方式隐藏 n  speed：动画持续多少毫秒 n  callback：可
jQuery 动画效果
qq_49900295的博客
04-01 2859
目录 1.常见的动画效果 2.显示隐藏效果 显示语法规范： 显示参数： 隐藏语法规范： 隐藏参数： 3.滑动效果 停止排队： 4.自定义动画animate 参数： 小案例 1.常见的动画效果 jQuery给我们封装了很多动画效果,最为常见的如下: 显示隐藏 show() hide() toggle() 滑动 slideDown() slideUp() slideToggle() 淡入淡出 fadeIn() fadeOu...
jQuery效果（隐藏和显示）
shao_xuan_的博客
01-05 7905
jQuery效果解析隐藏和显示hide()和show()jQuery toggle()淡入淡出jQuery fadeIn() 方法jQuery fadeOut() 方法jQuery fadeToggle() 方法jQuery fadeTo() 方法滑动jQuery slideDown() 方法jQuery slideUp() 方法jQuery slideToggle() 方法自定义动画jQuery animate() 方法停止动画jQuery stop() 方法 隐藏和显示 hide()和show() hi
jQuery 效果 - 滑动
10-26 1万+
eDown() 方法 jQuery slideDown() 方法用于向下滑动元素。 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。 下面的例子演示了 slideDown() 方法： &lt;!DOCTYPE html&gt; &lt;ht
jquery效果事件
07-23
《jQuery效果与事件详解》 在网页开发中，jQuery库以其简洁、强大的API深受开发者喜爱。本文将深入探讨jQuery中的效果与事件，帮助你更好地理解和运用这一强大的工具。 一、jQuery简介 jQuery是由John Resig在...
有关几个常见的jquery效果
03-16
标题中的“有关几个常见的jquery效果”意味着我们将探讨jQuery库中的一些流行效果，这些效果用于增强网页的用户体验。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，使得网页开发...
jQuery 效果 – 淡入淡出
01-19
jQuery 效果 – 淡入淡出 通过 jQuery，您可以实现元素的淡入淡出效果。 点击展示 淡入/淡出 面板 因为时间是宝贵的，我们提供快捷方便的学习方法。 在软件开发网,你可以学习需要的知识。 实例 演示 jQuery ...
fastcgi协议分析与实例
热门推荐
Shreck66的专栏
12-19 1万+
1.序言最近在用c++实现一个简易web服务器。在实现之前大体理了一下一个web服务器主要咋样实现。当时单纯的认为只需要将浏览器发来的http请求解析，找到对应的文件，然后给浏览器一个响应，把其要获取的文件发给它就完事。可是写了没几天就遇到了瓶颈。因为我们的浏览器并不能解析动态的php文件，那么如果获取的http请求的请求文件为.php文件我们该杂么办呢？2.将.php转换为.html的php-fp
PHP-超全局变量
Shreck66的专栏
06-06 1210
PHP中许多预定义的变量都是“超全局的”，这意味着他们在一个脚本的全部作用域中都可用。在函数或方法中无需执行global $variable;也可以访问他们这些超全局变量为: .GLOBALS ._SERVER ._REQUEST ._POST ._GET ._FILES ._ENV ._COOKIE ._SESSION 1.$GLOBALS-引用
PHP-表单
Shreck66的专栏
06-07 1070
1.PHP表单处理 PHP的超全局变量GET和_GET和_POST用于收集表单数据 一个简单的HTML表单如下<html> <head> <meta charset="utf-8"> </head> <body><form action="welcome.php" method="post"> Name:<input type="text" name="name"><br>
jQuery-HTML
Shreck66的专栏
06-05 968
jQuery-获得内容和属性(1)jQuery中非常重要的部分，就是操作DOM的能力 jQuery提供了一系列与DOM相关的方法，这使访问和操作元素和属性变得很容易 DOM = Document Object Model(文档对象模型) DOM定义访问HTML和XML文档的标准 (2)获得内容-text()、html()以及val() 三个简单实用的用于DOM操作的jQuery方法
jQuery-AJAX
Shreck66的专栏
06-05 843
1.AJAX简介(1)什么是AJAX AJAX = 异步 javascript 和XML(Asynchronous JavaScript and XML) 简单的说在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示 即其可实现对网页进行部分加载与显示 (2)jQuery与AJAX .我们可以通过jQuery的AJAX方法，使用HTTP GET和HTTP Pos
CSS样式学习笔记
Shreck66的专栏
06-03 843
1.CSS背景颜色我们可以使用background-color属性为元素设置背景色 这条规则把元素背景色设为灰色 p {background-color: gray;} 如果我们希望背景色从元素中的文本向外少有延生，只需要增加一些内边距 p {background-color: gray; padding: 40px;} 具体实例如下<!DOCTYPE html> <html lang="
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值