toggle() 隐藏和收缩

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);

$("#cd1").toggle();
});
});
</script>
</head>

<body>

<p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里,使三个矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

</body>
</html>

时间: 2024-09-15 13:37:40

toggle() 隐藏和收缩的相关文章

toggle()隐藏问题的解决方法

一个实例中使用到toggle函数,但是调用的时候会把元素隐藏掉,经搜索终于找到了原因,需要的朋友可以参考下 最近编写一个实例的时候使用到toggle函数,但是调用的时候会把元素隐藏掉,之前使用过也只是多个事件轮流切换罢了.百思不得其解于是就在网上搜索查看jQuery API文档.终于发现了原因: 原来在jQuery 1.9版本之后,toggle()发生了变化,以下是官网的Notes: Note: This method signature was deprecated in jQuery 1.8

jQuery的切换函数(hover,toggle)

1.hover:(鼠标悬停与离开事件) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数.而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误). 参数 over,outFunction

LigerUI 使用教程表格篇

阅读目录 第一个例子 数据结构 两种绑定数据的方式 配置column 自定义表头 自定义单元格 排序与分页 事件与方法 第一个例子 简介 ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序.分页.多表头.固定列等等. 支持本地数据和服务器数据(配置data或者url) 支持排序和分页(包括Javascript排序和分页) 支持列的“显示/隐藏” 支持多表头 支持固定列 支持明细行 支持汇总行 支持单元格模板 支持编辑表格(三种编辑模式,

jQuery中常用网页效果应用

一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form action="" method="post" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="user

第七章 jQuery操作表格及其它应用

1.表格变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head

jQuery -- 内容的淡入与淡出

本篇文章讲述了jQuery中文字或图形的淡入与淡出的动画效果,根据官方的API分为四个部分. 第一部分:show/hide/toggle 会出现五个滑块,点击后,内容会逐渐消失在左上角,有位移浮动. h5文件中: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画效果</title> <scrip

java脚本语言学习心得

第一篇技术博客,一定要认真! 第一篇技术博客,一定要认真! 第一篇技术博客,一定要认真! 好了,进入正题: 一 什么是脚本语言? 程序的运行方式有两种:编译运行和解释运行 1.1 前者的典型代表是java, 从文件角度看分为三步: write[编写]: a.java文件(拿个记事本就能写,扩展名是.java), compile[编译]: 编译(cmd命令是java a.java,ide集成了编译器运行之前自动编译)之后产生了a.class文件(是一堆二进制码,人看不懂,是给虚拟机看的) 运行[r

data-ng-hide 指令

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"

data-ng-show 指令

data-ng-show指令用来隐藏或显示应用中一部份HTML元素 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" />