jQuery效果-滑动

最新推荐文章于 2024-09-07 13:38:28 发布
最新推荐文章于 2024-09-07 13:38:28 发布
阅读量118 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/huchong-bk/p/11362669.html
版权

jQuery 滑动方法可使元素上下滑动。

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

  • slideDown()
  • slideUp()
  • slideToggle()

Query slideDown() 方法用于向下滑动元素。

语法：

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

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

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

code:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>

<p class="flip">请点击这里</p>

</body>
</html>

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法：

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

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

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

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideUp("slow");
});
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>

<body>

<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>

<p class="flip">请点击这里</p>

</body>
</html>

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

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

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

code:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>

<p class="flip">请点击这里</p>

</body>
</html>

 

转载于:https://www.cnblogs.com/huchong-bk/p/11362669.html

bagu1904
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery学习教程六: jQuery 效果 - 滑动 slide
j20lin的博客
03-22 645
实例 jQuery slideDown()演示 jQuery slideDown() 方法。 $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); div.panel,p.flip { margin:0px; pad
jQuery效果-滑动（slide系列）
飞翔的仙女杀手的博客
05-12 4371
在body中你需要四个div块 <div id="flipshow">点击</div> <div id="fliphide">隐藏</div> <div id="fliptoggle">隐藏/显示</div> <div id="content">Hello World</div> 在js文件中写入...
jQuery特效-slide
专注
01-09 2349
备注：方法的参数类型，见 jQuery特效-方法参数类型 .slideUp() 通过滑动的动作隐藏匹配元素 .slideUp( [duration ] [, complete ] ) .slideUp( options ) .slideUp( [duration ] [, easing ] [, complete ] ) .slideUp()方法变化匹配元素的高度。
jQuery 效果 ——slideDown() 方法、slideToggle() 方法、slideUp() 方法
半夏半暖半倾城的博客
06-19 4302
slideDown() 方法定义和用法slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。语法$(selector).slideDown(speed,callback)参数描述speed可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。可能的值：毫秒 （比如 1500）"slow" "normal" "fast" 在设置速度的情况下，元素从隐藏到可见的过程中，会...
（四）jQuery实现元素向上向下滑动效果
北斗星的爱886的博客
06-30 2390
1、slideDown（）方法 slideDown() 方法用于向下滑动元素。 $("button").click(function(){ $("#div").slideDown(); }); 2、slideUp（）方法 slideUp() 方法用于向上滑动元素。 $("button").click(function(){ $("#div").slideUp(); }); 3、slideToggle（）方法 slideToggle() 方法可以在 slideDown() 与 slide
jQuery滑动效果
m0_50175138的博客
08-16 879
1.1 jQuery中的滑动效果 ① slideDown()：概述： 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。 ② slideUp() ：概述： 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来
jQuery 滑动效果的实现
weixin_45846303的博客
05-29 387
jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。 fullpage.js的主要功能 fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。 主要功能有： 支持鼠标滚动。 支持前后退和键盘控制。 多个回调函数。 支持手机，平板触摸事件。 支持css3动画。 支持窗口缩放。 窗
jQuery 效果 - 滑动 - 菜单滑动效果
liuw510的博客
06-04 1170
点击大菜单打开收起子菜单效果 jQuery 效果 - 滑动：滑动打开和收起子菜单效果 源代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&amp
jquery-ui.css、jquery-ui.js下载
11-05
例如，要创建一个对话框，只需简单调用`.dialog()`方法，jQuery UI会自动处理剩下的布局、事件绑定和动画效果。 jQuery UI的组件丰富多样，例如： 1. **Dialogs** - 提供模态和非模态对话框，用于展示信息、警告或...
jquery-sliding-menu左右滑动导航插件
06-05
jQuery Sliding Menu是一款基于jQuery库的导航插件，它实现了左右滑动的效果，使得菜单项在用户交互时可以平滑地展开和收起。这种设计不仅美观，还能节省屏幕空间，特别适合于响应式布局或移动设备上的应用。 **二...
Query的三种常见动画效果
ninth_spring的博客
07-14 698
转载于： https://www.cnblogs.com/xiaohuochai/archive/2016/10/06/5932616.html 文章确实写得好，很详细！ 深入学习jQuery的三种常见动画效果 前面的话 　　动画效果是jQuery吸引人的地方。通过jQuery的动画方法，能够轻松地为网页添加视觉效果，给用户一种全新的体验。jQuery动画是一个大的系列，本文将详细介绍jQuery的三种常见动画效果——显隐效果、高度变化及淡入淡出 显隐 　　在CSS中，总结过实现元素显隐的9种思路。而j
JQuery创建动画效果的方法
ksx2333的博客
04-02 623
JQuery的11个常用的动画效果方法（fadeIn()、fadeOut()、fadeToggle()、slideDown()、slideUp()、slideToggle()、show()、hide() 、toggle()、animate()、stop()。）
jquery：简洁版滑动下拉菜单-21
qq_41632427的博客
06-11 120
html
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 934
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1408
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
Module “console“ has been externalized for browser compatibility.
最新发布
Alvin的博客
09-07 94
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
npm 安装electron网络问题报错解决
weixin_59685936的博客
09-05 1114
npm 安装electron网络问题报错解决
Nginx部署前端Vue项目
不会代码的小林
09-03 1323
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 770
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
jQuery实现表单输入提示文字滑动效果
"通过jQuery实现表单输入提示文字的滑动向上效果，利用鼠标事件和CSS3属性增强用户体验。" 在Web开发中，提供良好的用户体验是至关重要的，其中一个方法是在用户与表单交互时提供直观的提示。这个示例介绍如何使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值