jQuery的动画-上下滑动

最新推荐文章于 2023-05-14 10:30:40 发布
最新推荐文章于 2023-05-14 10:30:40 发布
阅读量983 收藏
点赞数
文章标签： jQuery 动画 上下滑动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bwf_erg/article/details/54096192
版权

三、上下滑动

1.slideDown()：向下滑动元素

2.slideUp()：向上滑动元素

3.slideToggle()：在 slideDown() 与 slideUp() 方法之间进行切换

这个3个方法的使用方法是一样的，这里以slideDown方法为例：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

布局如下，这里我们设置2个p标签，其中一个是标题，一个是提示语和一张图片

<body>

<p id="title">隐藏图片</p><

最低0.47元/天 解锁文章
bwf_erg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现：页面上下滚动效果
我的地盘
07-25 4203
现在的网站流行一个很长的页面，通过滚动条上下移动
动画效果-fadeIn fadeOut淡入浅出
z . s . j
04-16 1601
*{ margin:0; padding:0;}  body{font-size:15px;}  #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;}  .head{ background:#999; padding:5px; cursor:pointer;}  .content{ te
jq实现上下滚动
csz_12345的博客
05-13 1927
实现上上下滚动效果 啥也不说上效果 引入资源文件jq <script src="http://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js "></script> css * { margin: 0; padding: 0; } .scroll-box { width: 200px; height: 100px; border: 2
jQuery中通过animate做一个简单的上下滑动的动画案例
chaplinlong的博客
04-22 1万+
先说一下案例的目的。鼠标移动过去时，做上下切换动作，鼠标离开上下切换动作消失。当然，不是简单的展示和关闭。看源代码：<body> <div id="main"> <ul> <li>天空<div>1019</div></li> <li>第三人称<div>1019</div> </li> <li>马甲上的绳<div>1019</div></li> <li>妥协<div
jQuery动画效果-slideUp slideDown上下滑动示例代码
10-26
jQuery动画上下滑动效果在网页中的应用还是比较广泛的，其实很简单通过slideUp slideDown方法便可轻松实现，具体如下，喜欢的朋友可以参考下，希望对大家学习jquery有所帮助
jquery实现上下左右滑动的方法
10-24
3. **jQuery动画**： `$("#sec").animate({"left":"0px"},500)`表示将id为`sec`的元素的`left`属性在500毫秒内平滑地从当前值变为0像素。`animate()`函数可以同时处理多个CSS属性的动画效果，如同时改变`left`和`...
jQuery鼠标悬停上下滑动导航条
04-07
本文将深入探讨“jQuery鼠标悬停上下滑动导航条”这一特效，它为网站增添了一份现代感和互动性。 首先，jQuery是一个轻量级、高性能的JavaScript库，它的出现极大地简化了JavaScript编程。在“jQuery鼠标悬停上下...
jQuery定位上下滑动页面滚动代码
06-10
本项目涉及的是利用jQuery实现的一种上下滑动页面滚动定位的特效，它包括上下箭头图标以及锚点定位功能，能为用户提供更加便捷的浏览体验。 首先，我们要了解jQuery中的基本概念。jQuery的核心功能之一就是选择器，...
jQuery 实现上下,左右滑动
weixin_33898233的博客
01-20 280
    前几天的任务:http://t.sina.com.cn/  的下滑效果. 渐变移动出足够的空白 -&gt; 淡出最后一个 -&gt;渐变移动出足够的空白   我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了. 闲话不多说,上码 Js代码   //isw2 zhouxianglh 2010.07.07   //移动ul ...
jQuery动画效果
m0_68277495的博客
04-20 917
jQuery 效果 - 滑动 jQuery 滑动方法可使元素上下滑动，使元素有展开收起的效果。 slideDown() & slideUp() slideDown() 方法用于向下滑动元素; slideUp() 方法用于向上滑动元素。 语法： speed：可选，规定效果的时长，可以取值："slow"、"fast" 或毫秒。 callback：可选，是滑动完成后所执行的函数名称。例： slideToggle() slideToggle() 方法可以在 slideDown() 与.
jQuery简介、使用jquery
热门推荐
weixin_52629158的博客
05-14 2万+
jQuery 是一个 JavaScript库。(库里封装了很多方法，我们可以直接调用执行)write less, do more 写的更少，做的更多！jquery是什么？是javascript框架（库）。集成了大量的方法，属性。jQuery 极大地简化了 JavaScript 编程jQuery 很容易学习jquery英文官网jquery中文官网jQuery API 中文文档 | jQuery中文网jquery中文官网菜鸟教程jQuery 教程 | 菜鸟教程。
jquery 滑动效果
bbl_bbg的专栏
02-17 619
jQuery支持使用下面方法来实现HTML元素的滑动效果：   slideDown() slideUp() slideToggle() slideDown方法 用来实现向下滑动动画效果，其基本语法为：   $(selector).slideDown(speed,callback);   可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒
（四）jQuery实现元素向上向下滑动效果
北斗星的爱886的博客
06-30 2359
1、slideDown（）方法 slideDown() 方法用于向下滑动元素。 $("button").click(function(){ $("#div").slideDown(); }); 2、slideUp（）方法 slideUp() 方法用于向上滑动元素。 $("button").click(function(){ $("#div").slideUp(); }); 3、slideToggle（）方法 slideToggle() 方法可以在 slideDown() 与 slide
jQuery之动画效果
ajwqb06628的专栏
12-08 755
jQuery之动画效果 1、show()显示效果 　　语法：show(speed,callback)　　Number/String,Function　speend为动画执行时间，单位为毫秒。也可以为slow","normal","fast"　callback可选,...
JQuery小特效之为元素添加动画效果（缓慢的上下滑动）
IT界泥石流
06-15 4093
为元素添加动画效果（缓慢的上下滑动）使用slideToggle（）将段落滑上或滑下 方法。     （1.）自定义一个函数，（函数名可随意，但一定要符合规范）     （2.）选择要实现动画的控件，使用slideToggle（"动画速度",函数名）方法，设置动画速度（slow 缓慢，normal平常，fast快速）； 在slideToggle（）方法里，动画速度后面不跟函数名的话，动画效果只执行一...
jquery实现的动画上下闪动
weixin_30825199的博客
11-26 327
function shantuhanshu() { $("#shantu").animate({ "top": "-=4px", "opacity": "1" }, 500); $("#shantu").animate({ "top": "+=4px", "opacity": "1" }, 500); $(...
jQuery动画效果大全
若水弹丸之地
12-20 2万+
一、show()方法和hide()方法 1.show()与hide() show()：根据hide()方法记住的display属性值来显示元素。 hide()   : 将该元素的display样式改为 "none"。 2.参数让元素动起来： 单纯的调用show()和hide()相当于css("display","none/block/inline"),不会有任何动画。如果希望调用元素
jQuery动画（显示隐藏，淡入淡出，滑动）
TangJing_的博客
07-30 2789
目录 分类 基本动画函数 显示元素 交替显示隐藏 滑动效果 向上收缩效果 向下展开效果 交替伸缩样式 淡入淡出效果 淡入效果 淡出效果 自定义不透明度 jQuery的动画函数 分类 基本动画函数：既有透明度渐变，又有滑动效果。是最常用的动画效果函数 滑动动画函数：仅使用滑动渐变效果 淡入淡出动画函数：仅使用透明度渐变效果 基本动画函数 显示元素 jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数，他的动画效果是向左上..
jQuery-----淘宝精品服饰案例
最新发布
08-27
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接下来，您可以使用 jQuery 来处理页面中的元素，例如添加、删除、修改元素的内容和样式等。下面是一个简单的例子，展示了如何使用 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值