jquery动画显示效果

最新推荐文章于 2024-05-15 12:02:42 发布
最新推荐文章于 2024-05-15 12:02:42 发布
阅读量390 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vbloveshllm/article/details/51944883
版权

1.布局设置

<body>
    <button >动画演示</button>
    <div style="width:86px; height:68px; background-color:pink;position:absolute; top: 80px; left: 7px;"></div>
</body>


2.函数设置：单击button按钮进行动画显示效果

<script src="Script/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({left:'250px'});
            });
        });
    </script>


3.全部html如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Script/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({left:'250px'});
            });
        });
    </script>
</head>
<body>
    <button >动画演示</button>
    <div style="width:86px; height:68px; background-color:pink;position:absolute; top: 80px; left: 7px;"></div>
</body>
</html>



附加其他几种效果：看注释

 <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                // $("div").animate({left:'250px'}); //划到距离左侧250px
                //$("div").animate({ height: 'toggle' })//上下高度滑动
                //$("div").animate({ width: 'toggle' }); //左右宽度滑动
                var div = $("div");
                div.animate({ width: '400px', opacity: '0.4' }, "slow");
                div.animate({ height: '300px', opacity: '0.9' }, "slow");
                div.animate({ width: '300px', opacity: '0.7' }, "slow");
                div.animate({ height: '233px', opacity: '0.2' }, "fast");
            });
        });




vbloveshllm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery动画详解
weixin_45979181的博客
03-05 177
1.show() 显示动画
jQuery动画效果
张子又
01-19 6421
1. 隐藏和显示 show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。 1.1 hide() 和 show() 我们可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素： &lt;body&gt; &lt;div style="width: 200px; ...
jQuery的4种常见动画效果
IT00123的博客
08-13 2946
2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。...
2024年最新前端提高篇(九十八)：jQuery动画：显示与隐藏动画(1)，滴滴 战略 面试
最新发布
2401_84435866的博客
05-15 315
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】.box {btnbox效果：给按钮添加事件，点击时隐藏box：})效果：把box的初始状态设成none，给box添加点击事件，点击时显示：})：滑动向下显示slideUp()：滑动向上隐藏：通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
Jquery动画之显示和隐藏(普通、滑动、淡入淡出)
qq_33088807的博客
12-30 672
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-jq动画</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <input type="button" id="b1" va.
【jQuery动画】显示与隐藏效果
m0_55394328的博客
10-03 2648
在网页开发中，适当地使用动画可以使页面更加美观，进而增强用户体验。jQuery中内置了一系列方法用于实现动画，当这些方法不能满足实际要求时，用户也可以自定义动画。本期我们一起来了解一下显示与隐藏效果吧~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
jquery动画效果演示
weixin_45147894的博客
10-20 86
jquery实现动画伸缩效果
IT小生
05-26 1476
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Ty
jQuery文字切换动画效果
06-10
通过将这些样式应用到HTML元素上，可以控制文字在切换时的显示效果，比如淡入淡出、滑动等。 `js`文件夹内通常包含`jquery.js`（jQuery库本身）和一个或多个自定义的JavaScript文件，如`script.js`。在`script.js`...
jQuery学习动画效果基础
10-30
jQuery学习动画效果基础 jQuery学习动画效果基础是指使用jQuery库来实现网页中的动画效果。动画效果可以丰富网页的交互性和视觉效果，使用户体验更加流畅和自然。本文将详细介绍jQuery学习动画效果基础，并提供相关...
jQuery百分比进度条动画效果
04-02
通过jQuery的API，开发者可以轻松地控制进度条的显示、更新和动画过程。 进度条通常用于表示任务的完成程度，例如文件上传、数据下载或者页面加载。这个特效不仅展示了任务的进度，还通过动画形式增强了视觉吸引力...
jQuery之动画效果大全
10-21
《jQuery之动画效果详解》 jQuery作为一款强大的JavaScript库，其动画效果功能是其深受开发者喜爱的一大特性。本文将深入探讨jQuery中的各种动画...掌握这些基本的jQuery动画效果，将使你在网页交互设计上更具创造力。
jQuery 动画效果
01-07
一、基本效果（显示 / 隐藏） 三个方法的参数是一样的： speed：动画速度，可以是(“slow”,“normal”, or “fast”)或数字 easing：动画效果 “swing”或”linear” fn：动画执行完成之后要执行的操作 注意： 如果...
jQuery动画（显示隐藏，淡入淡出，滑动）
TangJing_的博客
07-30 2787
目录 分类 基本动画函数 显示元素 交替显示隐藏 滑动效果 向上收缩效果 向下展开效果 交替伸缩样式 淡入淡出效果 淡入效果 淡出效果 自定义不透明度 jQuery的动画函数 分类 基本动画函数：既有透明度渐变，又有滑动效果。是最常用的动画效果函数 滑动动画函数：仅使用滑动渐变效果 淡入淡出动画函数：仅使用透明度渐变效果 基本动画函数 显示元素 jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数，他的动画效果是向左上..
jquery延时载入动画焦点图- 有点类似视差动画
肖肖肖丽珠的博客
06-23 1807
在这里我用了一个插件jquery.DB_tabMotionBanner.min.js。 参考：http://www.jqueryfuns.com/resource/1424 http://www.xwcms.net/js/jdt/76222.html 首先引入js文件   注意这里是1.8.3版本的，其他版本可能就不适用啦。 页面
前端提高篇(九十八)：jQuery动画：显示与隐藏动画，简单聊聊2024年前端开发的现状和思考
m0_60666921的博客
03-31 393
)：滑动向下显示：滑动向上隐藏：通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。1.给按钮绑定点击事件，点击时，box从上到下，滑动显示出来：})效果：2.给按钮绑定点击事件，点击时，box从下到上，滑动隐藏：此时初始状态是box显示，;})效果：3.给按钮绑定点击事件，点击前，如果box显示，点击后box以slideUp的方式隐藏；
jQuery显示与隐藏动画
jwz934738949的博客
09-02 928
在jQuery中显示与隐藏动画有特定的方法。show与hide方法，show方法为显示动画，而hide方法为隐藏动画 show与hide有两个参数，第一个参数为动画显示与隐藏的时间，第二个参数为回调函数，当动画效果执行完毕之后，再执行。 使用toggle函数为切换动画，可以传入切换动画的时间，单位为毫秒 $("button").eq(0).click(function () { $("div").show(1400, function () { alert.
jQuery - 获得内容和属性
BishopTylaor的博客
04-11 336
获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法： ● text() - 设置或返回所选元素的文本内容 ● html() - 设置或返回所选元素的内容（包括 HTML 标记） ● val() - 设置或返回表单字段的值 $("#btn1").click(function(){ alert("Text: ...
JQuery操作div隐藏和显示的4种动画
热门推荐
projectNo的博客
10-25 2万+
不多说直接上代码，效果如下： <html> <head> <meta charset="utf-8"> <meta name="author" content="wg"> <title>Jquery-Div动画显示</title> <script src="jquery-1.10.2.min.js" type="text/ja
jQuery实现动画效果
06-07
jQuery 是一个流行的 JavaScript 库，可以方便地实现各种动画效果。以下是使用 jQuery 实现动画效果的一些常用方法： 1. animate()：animate() 方法可以用来实现元素的动画效果，可以设置动画的持续时间、动画方式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值