Jquery效果代码--（二）
//jQuery 效果- 隐藏和显示.通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素： //掩藏效果演示：
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
}); //展示效果演示
$(document).ready(function(){
$("#show").click(function(){
$("p").show();
});
}); //HTML代码
/*
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
*/
$(selector).hide(speed,callback);
/*
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
*/
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);//话费1秒的事件执行掩藏的效果
});
}); /*
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
*/
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
/*
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
*/
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000);
});
}); //Jquery效果之---淡入淡出
/*
jQuery 拥有下面四种 fade 方法： fadeIn()
fadeOut()
fadeToggle()
fadeTo()
*/
//jQuery fadeIn() 用于淡入已隐藏的元素。$(selector).fadeIn(speed,callback);
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
//可选的 callback 参数是 fading 完成后所执行的函数名称。 /*
<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>
*/
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
$("p").fadeIn(4000);
});
});
//jQuery fadeOut() 方法用于淡出可见元素。
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000); })
}); //jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
}); //jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
//$(selector).fadeTo(speed,opacity,callback);
//必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
//可选的 callback 参数是该函数完成后所执行的函数名称。
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15)
$("#div2").fadeTo("slow",0.5)
$("#div3").fadeTo("slow",0.12)
});
}); //jQuery 效果-滑动
/*
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()
*/
/*
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
*/
//JQuery代码
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("dlow");
});
});
//CSS代码
/*
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
*/ //jQuery slideUp() 方法用于向上滑动元素。
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp()
});
});
//jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle();
})
}) //jQuery 效果- 动画
//jQuery animate() 方法允许您创建自定义的动画。
//$(selector).animate({params},speed,callback);
//必需的 params 参数定义形成动画的 CSS 属性。
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是动画完成后所执行的函数名称。
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
})
});
//<div style="background:#98bf21;height:200px;width:100px;position:absolute;"> //也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
}); //jQuery animate() - 使用预定义的值
//您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
}); //jQuery animate() - 使用队列功能
//默认地，jQuery 提供针对动画的队列功能。
//这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
}); $(document).ready(function(){
$("button").click(function(){
var div=("div");
div.animate({left:'250px'});
div.animate({fontSize:'3em'},"slow");
});
}); //stop()停止动画
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
}); //jQuery Callback 方法
$(document).ready(function(){
$("p").hide("slow",function(){
alert("The Page is now hidden!");
});
}); //没有回调函数的情况
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("现在段落被隐藏了");
});
});
}); //通过 jQuery，可以把动作/方法链接在一起。
//Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","green").slideUp(2000).slideDown(2000);
});
}
);
Jquery效果代码--（二）的更多相关文章
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...
- jQuery下拉友情链接美化效果代码分享
这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...
- jQuery -- 光阴似箭（二）：jQuery效果的使用
jQuery -- 知识点回顾篇(二):jQuery效果的使用 1. jQuery 效果 -- 隐藏和显示: 使用 hide() 和 show() 方法来隐藏和显示 HTML 元素. <!DO ...
- jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...
- 腾讯新闻多图jQuery相册展示效果代码
腾讯新闻多图jQuery相册代码,带左右切换箭头,带缩略图,可左右切换,点击缩略图展示原图. 在线演示本地下载
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- 使用jquery.qrcode生成二维码实现微信分享功能
前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...
随机推荐
- AFNetworking 3.0迁移指南
AFNetworking是一款在OS X和iOS下都令人喜爱的网络库.为了迎合iOS新版本的升级, AFNetworking在3.0版本中删除了基于 NSURLConnection API的所有支持. ...
- string与StringBuilder之性能比较
知道“StringBuilder比string性能强”好多年了,近日无聊病发作,就把这两个家伙给动了手术: using System; using System.Text; namespace Con ...
- 转：ORACLEERP开发基础之EBS开发基础
转自:http://blog.itpub.net/8781091/viewspace-1012244/ [内容导航] 第1页:开发工具安装 第2页:增加数据块 第3页:注册表单FORM 第4页:注册请 ...
- How to fix “The program can’t start because MSVCR110.dll is missing from your computer.” error on Windows
原文出处 How to fix “The program can’t start because MSVCR110.dll is missing from your computer.” error ...
- 在HTML中怎么去掉a标签（超链接）的下划线？
<style type="text/css">a:link,a:visited{ text-decoration:none; /*超链接无下划线*/}a:hover{ ...
- SQLServer实现split分割字符串到列
网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题. 先贴上某大牛写的sp ...
- React-Native牛刀小试仿京东砍啊砍砍到你手软
React-Native牛刀小试仿京东砍啊砍砍到你手软 React-Native基础教程 *React-Native基础篇作者git *React-Native官方文档 *Demo 几个月前faceb ...
- JAVA IDE下载地址
Subclipse 各版本官网下载地址: http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 Eclipse ...
- 04_过滤器Filter_05_Filter解决全站中文乱码问题（POST方式）
[工程截图] [web.xml] <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns: ...
- Morgan Stanley telephone interview
Today is Monday, April 28. I get a telephone call from Morgan Stanley in Shanghai. My examiner is a ...