jQuery效果

隐藏、显示、切换、滑动、淡入淡出、以及动画

1、隐藏与显示(改变：display：none;)

hide()——隐藏

show()——显示

toggle()方法：可以使用它来切换hide()与show()方法

eg1：显示

<style type="text/css">

*{margin:0;padding:0;}

.body{font-size:12px;font-family:"微软雅黑";color:#666;}

.yym{width:100px;height:100px;background:red;text-align:center;line-height:100px;border-radius:50px;color:#fff;display:none;}

</style>

</head>

<body>

<div class="yym">世界那么大</div>

<input type="button" value="点击显示HTML元素" id="show_btn" />

<input type="button" value="点击显示HTML元素并执行回调函数" id="show_btn1" />

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){

//点击按钮让class=yym的文本显示出来

$("#show_btn").click(function(){

//slow默认值==600毫秒，1秒=1000毫秒;fast==200毫秒

$(".yym").show("slow");

});

//用1000毫秒把.yym显示出来，并且将文本替换成新的内容

$("#show_btn1").click(function(){

$(".yym").show(1000,function(){

$(this).text("我想去看看");

});

});

});

</script>

eg2：隐藏

<body>

<p>黄河是中国的第二大河流</p>

<input type="button" value="点击隐藏文本" id="yym_hide"/>

<input type="button" value="点击缓慢隐藏文本" id="yym_hide1" />

<input type="button" value="缓慢隐藏文本并回调函数" id="yym_hide2" />

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){

//点击按钮隐藏P标签

$("#yym_hide").click(function(){

$("p").hide();

});

//点击按钮缓慢隐藏P标签

$("#yym_hide1").click(function(){

$("p").hide(2000);

});

//点击元素

$("#yym_hide2").click(function(){

//隐藏p标签，function（回调函数）

$("p").hide(1000,function(){

$("body").text("黄河之母亲河");//文本隐藏后，若要让文本改变，则用body

});

});

});

</script>

eg3：toggle()——点击按钮隐藏，再点击又显示

<style type="text/css">

*{margin:0;padding:0;}

.yym{width:300px;height:300px;background:green;}

</style>

</head>

<body>

<div class="yym"></div>

<input type="button" value="toggle函数" id="yym_toggle" />

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){

//点击按钮隐藏，再点击又显示

$("#yym_toggle").click(function(){

});

});

</script>

eg3.1:

<style type="text/css">

*{margin:0;padding:0;}

.yym{width:300px;height:300px;background:green;}

</style>

</head>

<body>

<div class="yym"></div>

<input type="button" value="toggle函数" id="yym_toggle" />

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){

//点击按钮隐藏，再点击又显示

$("#yym_toggle").click(function(){

$(".yym").toggle(2000,function(){

$("body").html("<img src='http://p1.qhimg.com/dmt/528_351_/t012ffcdd03db3d42f6.jpg' alt='美女' width='500' height='300'>")

});

});

});

</script>

2、淡入淡出(改变：宽度、高度、透明度<opacity>)

通过jQuery，可以实现元素的淡入淡出效果(改变opacity透明度)

jQuery拥有以下四种方法：

fadeIn()用于淡入已隐藏的元素

fadeOut()方法用于淡出可见元素

fadeToggle()该方法可以在fadeInt()与fadeOut()方法之间进行切换

如果元素已淡出，则fadeToggle()会向元素添加淡入效果

如果元素已淡入，则fadeToggle()会向元素添加淡出效果

jQuery fadeTo()方法

jQuery fadeTo()方法允许渐变为给定的不透明（值介于0与1之间）

eg:fadeIn()淡入元素  fadeOut淡出元素 fadeToggle()切换  fadeTo透明度

<style type="text/css">

*{margin:0;padding:0;}

.yym{width:300px;height:300px;background:red;display:none;}

</style>

</head>

<body>

<input type="button" value="我是一个fadeIn方法" id="yym_fadeIn">

<input type="button" value="我是一个fadeOut方法" id="yym_fadeOut">

<input type="button" value="fadeToggle方法" id="yym_fadeToggle" />

<input type="button" value="fadeTo透明度" id="yym_fadeTo" />

<div class="yym"></div>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){

//fadeIn淡入

$("#yym_fadeIn").click(function(){

$(".yym").fadeIn(2000);

});

//fadeOut淡出

$("#yym_fadeOut").click(function(){

$(".yym").fadeOut(2000);

});

//fadeToggle 隐藏与显示的切换

$("#yym_fadeToggle").click(function(){

$(".yym").fadeToggle();

});

//fadeTo渐变为给定的不透明度（值介于0到1之间）

$("#yym_fadeTo").click(function(){

$(".yym").fadeTo(2000,0.5,function(){//表示2秒钟变成半透明度，所有例子中function都是可加可不加，加是另外改变什么

alert("太帅了");

});

});

});

</script>

</body>

3、滑动(改变：高度)

jQuery滑动方法可使元素上下滑动（主要是改变高度）

通过jQuery，可以在元素上创建滑动效果

jQuery有以下滑动方法：

slideDown()用于向下滑动元素

slideUp()用于向上滑动元素

slideToggle()方法可以在slideDown()和slideUp方法之间进行切换

如果元素向下滑动，则slideToggle()可向上滑动

如果元素向上滑动，则slideToggle()可向下滑动

eg：

<style type="text/css">

*{margin:0;padding:0;}

.yym{width:300px;height:300px;background:red;display:none}

</style>

</head>

<body>

<input type="button" value="向下滑动" id="yym_slideDown" />

<input type="button" value="向上滑动" id="yym_slideUp" />

<input type="button" value="上下滑动切换" id="yym_slideToggle" />

<div class="yym"></div>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){

//slideDown向下滑动

$("#yym_slideDown").click(function(){

$(".yym").slideDown(2000);

});

//slideUp向上滑动

$("#yym_slideUp").click(function(){

$(".yym").slideUp(4000);

});

//slideToggle上下滑动切换

$("#yym_slideToggle").click(function(){

$(".yym").slideToggle(2000);

});

});

</script>

4、 1）动画

jQuery animate()方法允许创建自定义的动画

jQuery动画——animate()方法

jQuery animate()方法用于创建自定义动画

2）停止动画

jQuery stop()方法用于在动画或效果完成前对他们进行停止

jQuery stop()方法

jQuery stop()方法用于停止动画或效果，在他们完成之前

stop()方法适用于所有jQuery效果函数，淡入淡出和自定义动画

eg：

<style type="text/css">

*{margin:0;padding:0;}

.yym{width:300px;height:300px;background:red;position:absolute;left:0;top:30px;}

</style>

</head>

<body>

<input type="button" value="点击我放大" id="yym_animate" />

<input type="button" value="点击我停止" id="yym_stop" />

<div class="yym"></div>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){

//使原背景图片动起来

$("#yym_animate").click(function(){

$(".yym").animate({

width:"500px",

height:"500px",

//移动时必须要position定位

left:"200px",//向右移动

top:"200px"//向下移动

},2000,function(){//不写时间也可以的

alert(0);

});

});

//使原本动起来的背景图片停下来

$("#yym_stop").click(function(){

$(".yym").stop();

});

});

</script>

</body>

jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画的更多相关文章

  1. JQuery效果隐藏/显示

    hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...

  2. 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  3. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  4. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

  5. 【Android Developers Training】 69. 视图切换的淡入淡出效果

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  6. JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画

    /** * [JQ基础动画] * show() 显示 * hide() 隐藏 * toggle() 切换 * 默认无动画,如果要产生动画 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 * * ...

  7. JQuery动画之淡入淡出动画

    1. 淡入动画 1.1 不带参数的淡入动画 格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...

  8. [Android]异步加载图片，内存缓存，文件缓存，imageview显示图片时增加淡入淡出动画

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3574131.html  这个可以实现ImageView异步加载 ...

  9. Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  10. jQuery 效果 – 隐藏和显示

    在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏.显示.切换,滑动 ...

随机推荐

  1. SpringMVC4+thymeleaf3的一个简单实例（篇二：springMVC与thymeleaf的整合）

    延续前篇内容. 开始之前,我们首先要准备以下12个jar文件:spring-aop-4.3.3.RELEASE.jarspring-beans-4.3.3.RELEASE.jarspring-cont ...

  2. Vijos1834 NOI2005 瑰丽华尔兹 动态规划 单调双端队列优化

    设dp[t][x][y]表示处理完前t个时间段,钢琴停留在(x,y)处,最多可以走多少个格子 转移时只需逆着当前倾斜的方向统计len个格子(len为时间区间的长度,len=t-s+1),如果遇到障碍就 ...

  3. 在Xcode4中给程序提供命令行参数（转）

    网上xcode4的资料实在是不多,再加上xcode4相对3的改动还那么大,并且还只有英文版.我为了这个问题头痛了很久.后来终于找到了...方法如下 xcode菜单的Product->EditSc ...

  4. 使用BeanUtils组件

    使用BeanUtils组件 前提 1:导入commons-beanutils-1.8.3.jar        //根据  本人使用的是1.8.3的版本 2:导入日志包      //就是loggin ...

  5. cetos 6.3 安装 apache+mysql+php

      1.安装 apache 服务器 yum install httpd 启动服务 service httpd start or /etc/init.d/httpd start 2.安装 mysql 数 ...

  6. 阿里云 centos vim 显示中文 乱码

    开始以为是vim 设置编码的问题 :网上搜  改 .vimrc    无效!!! 后转战  是不是系统里面没有中文字体 1.先从你本机 C:\Windows\Fonts 拷贝或者网络上下载你想要安装的 ...

  7. discuz二次开发技巧

    discuz二次开发技巧 二次开发大多时候知识设置和处理,如果能够获知模板文件获得的变量数组将大大提高我们的开发效率 获取页面已经定义的变量 <--{eval printf_r(get_defi ...

  8. git extrad_addons 部署说明

    注册一个git账号 : 网址:  https://github.com/ 1:安装git   sudo apt-get install git 2:  b把urc扩展占模块pull下来    cd   ...

  9. 使用java求高精度除法，要求保留N位小数

    题目要求是高精度除法,要求保留N位小数(四舍五入),并且当整数部分为0时去除0的显示 import java.math.BigDecimal; import java.util.Scanner; pu ...

  10. bzoj1127: [POI2008]KUP

    Description 给一个n*n的地图,每个格子有一个价格,找一个矩形区域,使其价格总和位于[k,2k] Input 输入k n(n<2000)和一个n*n的地图 Output 输出矩形的左 ...