jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)_jquery

实例
通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素:

复制代码 代码如下:

$(".btn1").click(function(){
$("p").slideToggle();
});

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

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

语法
$(selector).slideToggle(speed,callback)参数 描述
speed 可选。规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。

可能的值:

毫秒 (比如 1500)
"slow"
"normal"
"fast"
在设置速度的情况下,元素在切换的过程中,会逐渐地改变其高度(这样会创造滑动效果)。

callback 可选。toggle 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

提示和注释
提示:如果元素已经隐藏,则该效果不产生任何变化,除非规定了 callback 函数。

时间: 2024-07-28 17:11:57

jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)_jquery的相关文章

Javascript与jQuery方法的隐藏与显示_jquery

示例代码很简单,直接奉上,就不多废话了 复制代码 代码如下: <html> <head> <title>denotoggle</title> <style> #box {     width: 100px;     height: 100PX;     background-color: #ddd } .show {     visibility: hidden; } </style> <script src="jqu

Jquery实现控件的隐藏和显示实例

 本篇文章主要是对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/

jQuery响应鼠标事件并隐藏与显示input默认值_jquery

分享下jQuery如何隐藏和显示 input 默认值的例子. <!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> <

利用jQuery实现WordPress中@的ID悬浮显示评论内容_jquery

比如: A 留言了, B 用 @ 回复了 A, 所以 B 的回复可能是这样的: @A How much money do you have? 就是说, 当鼠标悬停在 @A 上面的时候, 就会将 A 的评论内容显示在一个悬浮区域中. 实现步骤在这里我们将以iNove主题为例进行讲解. 1. 将以下代码保存为commenttips.js: jQuery(document).ready( function(){ var id=/^#comment-/; var at=/^@/; jQuery('#th

jQuery使用each方法与for语句遍历数组示例_jquery

本文实例讲述了jQuery使用each方法与for语句遍历数组.分享给大家供大家参考,具体如下: <!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">

jQuery抛物线运动实现方法(附完整demo源码下载)_jquery

本文实例讲述了jQuery抛物线运动实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>抛物线运动效果</title> <style type="text/css"> .boll

jquery中load方法的用法及注意事项说明_jquery

调用load方法的完整格式是:load( url, [data], [callback] ),其中 url:是指要导入文件的地址. data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里. callback:可选参数:是指调用load方法并得到服务器响应后,再执行的另外一个函数. 一:如何使用data 1.加载一个php文件,该php文件不含传递参数 $("#myID").load(

jQuery使用$.get()方法从服务器文件载入数据实例_jquery

本文实例讲述了jQuery使用$.get()方法从服务器文件载入数据.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.get(

jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

在移动互联网时代,HTML5开发越来越收到欢迎.于是各种HTML5的框架都出来了.由于对于jquery的熟悉,jquery mobile 为多数人选择学习的对象.我也是众多追求者之一.最近一直在开发jQuery Mobile的相关应用.并颇有心得,再这里和大家一起分享一下. 好了,我们之间上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>