#滑动开关很好玩

这个章节主要是学习用Jquery的slideDown, slideUp, slideToggle写一个小功能，很简单。

CSS代码

<style>div{width:400px;height:200px;border:dashed 1px #eaeaea;position:relative;float:left;margin-right:20px;padding:10px;background-color:#f8f8f8;}</style>

JS代码

<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".textarea_one").hide();$(".down").click(function(){$(".textarea_one").slideDown(500);});//           $(".textarea_two").hide();$(".up").click(function(){$(".textarea_two").slideUp(500);});$(".textarea_three").hide();$(".toggle").click(function(){$(".textarea_three").slideToggle(500);});});</script>

HTML代码

<!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" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>My second Jquery web app</title><style>div{width:400px;height:200px;border:dashed 1px #eaeaea;position:relative;float:left;margin-right:20px;padding:10px;background-color:#f8f8f8;}</style><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".textarea_one").hide();$(".down").click(function(){$(".textarea_one").slideDown(500);});//            $(".textarea_two").hide();$(".up").click(function(){$(".textarea_two").slideUp(500);});$(".textarea_three").hide();$(".toggle").click(function(){$(".textarea_three").slideToggle(500);});});</script>
</head>
<body><div><h1>Jquery向下滑动测试</h1><br/><p class="down" style="cursor: pointer;">单击我向下滑动</p><p class="textarea_one">这里是区域的内容</p></div><div><h1>Jquery向上滑动测试</h1><br/><p class="up" style="cursor: pointer;">单击我向上滑动</p><p class="textarea_two">这里是区域的内容</p></div><div><h1>Jquery切换滑动测试</h1><br/><p class="toggle" style="cursor: pointer;">单击我切换滑动</p><p class="textarea_three">这里是区域的内容</p></div>
</body>
</html>

效果图

Jquery滑动开关操作（slideDown, slideUp, slideToggle）相关推荐

JQuery 动画滑动显示和隐藏方式 slideDown\slideUp\slideToggle
滑动显示和隐藏方式 slideDown([speed], [easing],[fn]) slideup( [ speed, [easing],[fn]]) slideToggle([speed], [ ...
【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
jQuery介绍 jQuery基本使用 jQuery选择器 jQuery样式操作 jQuery动画效果
1.1. jQuery 介绍 1.1.1 JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封 ...
jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
jQuery 滑动方法可使元素上下滑动. jQuery slideDown() 方法用于向下滑动元素. $(selector).slideDown(speed,callback); 可 ...
JQuery之滑动效果slideDown ， slideUp , slideToggle
slideDown(speed,callback) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数. 这个动画效果只调整元素的高度,可以使匹配 ...
利用css3实现jQuery中的slideDown和slideUp效果
最开始想要实现一个菜单从上向下滑出的效果,采用transition: translate 0.5s ease-in;总是觉得别扭的很,无意间看到小米官网的二级菜单从上向下滑出的效果,顿时觉得这样就不会 ...
jquery slideDown slideUp 对于table无效
jquery slideDown slideUp 对于table无效,需要在table外面套一层div才可以使用转载于:https://www.cnblogs.com/tfiremeteor/p/j ...
jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
jQuery动画操作
1.1 知识点 1．show()通过display:block/none来实现隐藏和显示 2．show(毫秒值):通过控制宽高透明度和display来实现 3．show("slow/norm ...

Jquery滑动开关操作（slideDown, slideUp, slideToggle）

Jquery滑动开关操作（slideDown, slideUp, slideToggle）

#滑动开关很好玩

CSS代码

JS代码

HTML代码

效果图

Jquery滑动开关操作（slideDown, slideUp, slideToggle）相关推荐

最新文章

热门文章