jQuery效果-滑动
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="myjs3.js"></script>
<style>
#content,#flipshow,#fliphide,#fliptoggle{
padding:5px;
text-align:center;
background-color: #ece023;
border:solid 1px #ece999;
}
#content{
padding:50px;
display:none;
}
</style>
</head>
<body> <div id="flipshow">出现</div><!-- 点击滑动出现 -->
<div id="fliphide">隐藏</div><!-- 点击滑动隐藏 -->
<div id="fliptoggle">隐藏/出现</div><!-- 点击滑动隐藏/出现 -->
<div id="content">Hello world</div> </body>
</html>
js代码：
$(document).ready(function(){
$("#flipshow").click(function(){//点击滑动出现
$("#content").slideDown();
});
$("#fliphide").click(function(){//点击滑动隐藏
$("#content").slideUp();
});
$("#fliptoggle").click(function(){//点击滑动隐藏/出现
$("#content").slideToggle();
});
});
jQuery效果-滑动的更多相关文章
- jQuery 效果 —— 滑动
jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...
- jQuery 效果 - 滑动
jQuery 滑动方法可使元素上下滑动. 点击这里,隐藏/显示面板 实例 jQuery slideDown()演示 jQuery slideDown() 方法. jQuery slideUp()演示 ...
- jQuery 效果 – 滑动
jQuery 滑动方法可使元素上下滑动. 点击这里,隐藏/显示面板 一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容. 在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识. 实例 jQue ...
- 松软科技课堂:jQuery 效果 - 滑动
jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery sli ...
- jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...
- Jquery效果代码--（二）
//jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...
- jQuery -- 光阴似箭（二）：jQuery效果的使用
jQuery -- 知识点回顾篇(二):jQuery效果的使用 1. jQuery 效果 -- 隐藏和显示: 使用 hide() 和 show() 方法来隐藏和显示 HTML 元素. <!DO ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
随机推荐
- 《C专家编程》之一
一.解决函数返回指针的几种方法 1. 返回一个指向字符串常量的指针. 例子: char* func() { rturn "Only work for simple strings" ...
- JSP九个隐式对象及作用域
out:JspWriter实例对象,作用域为page(页面执行期) 向客户端输出内容 request:HttpServletRequest实例对象,作用域为request(用户请求期) 请求信息 re ...
- 4_Linux_文件压缩和解压指令
3.4压缩解压命令.gz .tar.gz .zip .bz2 1)gzip 仅压缩文件 gzip命令用于压缩文件,英文原意为GNU zip,所在路径/bin/gzip,其语法格式为: gzip [文件 ...
- nginx轮询配置详解
nginx轮询配置详解... Nginx配置文件详细说明转载
- C#Css/Js静态文件压缩--Yui.Compressor.Net
一.Asp.Net 自带静态文件压缩工具包 Microsoft.AspNet.Web.Optimization http://www.nuget.org/packages/Microsoft.AspN ...
- android SQLite使用SQLiteOpenHelper类对数据库进行增删查改
一个简单的例子,当点击按钮时进行相应的操作,效果图如下: 项目代码如下: DatabaseHelper类 package com.example.sqlitedatebasetest; import ...
- Linux中 pid_t 类型的定义.
说明:涉及到的头文件(.h),目录默认都是基于 /usr/include/ 目录. 1.在 "/sys/types.h"中,有下列内容: #include <bits/typ ...
- Hbase常用操作
下面我们看看HBase Shell的一些基本操作命令,我列出了几个常用的HBase Shell命令,如 名称 命令表达式 创建表 create '表名称', '列名称1','列名称2','列名称N' ...
- 13 hbase连接
Configuration conf=new Configuration(); String zookeeper=""; String clientport="; Str ...
- MySql中的变量定义(转)
根据mysql手册,mysql的变量分为两种:系统变量和用户变量.但是在实际使用中,还会遇到诸如局部变量.会话变量等概念.根据个人感觉,mysql变量大体可以分为四种类型: 一.局部变量. 局部变量一 ...