JQuery显示隐藏

主要用到了JQuery的slideToggle() 方法

slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。

如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。

代码及效果如图所示(其中div和p标签的位置不同效果不同)

时间: 2024-08-25 09:39:58

JQuery显示隐藏的相关文章

JQuery显示隐藏(学习他人方法后)

主要用到了JQuery的slideToggle() 方法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 代码及效果如图所示(其中div和p标签的位置不同效果不同) <script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>  

jquery显示隐藏操作

记得还是当初开始学习jquery的时候有去用心看看文档,然后在做项目的时候偶尔有用到,一直没有闲暇之余去温习,去整理所谓的基础,看了后有些淡忘的得意再次更新. 第一.隐藏显示 以下所有的代码如无特殊声明中speed的值可选且可填写(slow,fast,number(毫秒)).callback为执行完后要执行的函数也是可选参数. $(selector).show(speed,callback); $(selector).hide(speed,callback); $(selector).toggl

jquery点击改变class并toggle;jquery点击改变图片src源码并toggle;jquery显示隐藏toggle

<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script><style>.bg1 {    background

jQuery显示隐藏动态效果的几种写法

<script type="text/javascript"> $(document).ready(function() {     /*$("#test1").click(function(){        $("#test2").toggle("fast",function(){                    });    });*/        /* $("#test1").c

jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果   $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作

jQuery 效果 - 隐藏和显示

jQuery hide() 和 show() show()方法显示隐藏的元素 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="jquery-2.2.0.min.js"></script> 5 <script type="text/javascript"> 6 $(document).ready(function(){ 7 $("#h

jQuery版感应鼠标显示隐藏的菜单

<!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> <title>jQuery版感应鼠标显示隐藏的菜单丨天津

基于jquery封装通用的控制显示隐藏的方法

应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写方法,不光费时间,还会让我们的代码显得异常冗余,因此我们写个通用方法! 附上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

jQuery控制TR的显示隐藏

网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: Html代码   <table> <tr><td>这行不隐藏</td></tr> <tr id="tr_1"><td>这行要隐藏</td></tr> <tr id="tr_2"><td>这行要隐藏&