jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jQuery 效果- 隐藏和显示:hide() 和 show()
规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒
您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
parents 找到每个span元素的所有祖先元素。 $("span").parents()
找到每个span的所有是p元素的祖先元素。 $("span").parents("p")
<script>
$(function(){
$("button").click(function(){
$("p").hide(800);
})
})
$(function(){
$("button").click(function(){
$("p").toggle();
})
})
$(document).ready(function(){
$(".ex").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
jQuery 效果- 淡入淡出:
jQuery fadeIn() 用于淡入已隐藏的元素。
jQuery fadeOut() 方法用于淡出可见元素。
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
<script>
$(function(){
$("button").click(function(){
$("div1").fadeToggle(2000);
})
})
$(function(){
$("button").click(function(){
$(".div1").fadeTo("slow", 0.45);
})
})
</script>
jQuery 效果- 滑动:
jQuery slideDown() 方法用于向下滑动元素。
jQuery slideUp() 方法用于向上滑动元素。
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
<script>
$(function(){
$(".div").click(function(){
$(".div2").slideToggle("slow");
})
})
$(function(){
$(".div").slideUp("fast",function(){
alert("456789");
})
})
</script>
jQuery 效果- 动画:
jQuery animate() 方法允许您创建自定义的动画。
jQuery stop() 方法用于停止动画或效果
Callback 函数在当前动画 100% 完成之后执行。
<script>
$(function(){
$("button").click(function(){
$("div").animate({left,'200px'})
$("div").animate({
width:"+=150px",height:"+=200px" //宽高无限循环递增
})
})
})
</script>
jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏的更多相关文章
- jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链
隐藏和显示 $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度, ...
- jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出
1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...
- jQuery实现简单的图片淡入淡出效果
整体思路: 1.实现页面布局,设置css样式 2.用jQuery获取需要用到的变量 3.用jQuery为两个按钮绑定事件 一.页面布局: <div class="d1"> ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- jquery 用attr修改src 淡入淡出
$("#wanwan").animate({ opacity: 'toggle' }, "slow", null, function () { $(" ...
- ExtJS简单的动画效果(ext js淡入淡出特效)
1.html页面:Application HTML file - index.html <html> <head> <title>ExtJs fadeIn() an ...
- jQuery 学习02——效果:隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链
jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...
- jQuery效果之隐藏与显示、淡入淡出、滑动、回调
隐藏与显示 淡入淡出 滑动效果
- jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
随机推荐
- T-SQL 之 多表联合更新
1. sqlite 多表更新方法 UPDATE tA SET col1=tB.col1 FROM tableA tA INNER JOIN tableB tB ON tA.col2=tB.col2 这 ...
- JS Math算数
Math.ceil()ceil() 方法可对一个数进行上舍入. ceil英译 天花板 参数必须是一个数值.返回值大于等于 x,并且与它最接近的整数. Math.floor()floor() 方法可对一 ...
- 1.7.7 Spell Checking -拼写检查
1. SpellCheck SpellCheck组件设计的目的是基于其他,相似,terms来提供内联查询建议.这些建议的依据可以是solr字段中的terms,外部可以创建文本文件, 或者其实lucen ...
- 【开源项目12】Retrofit – Java(Android) 的REST 接口封装类库
Retrofit官网:http://square.github.io/retrofit/ Retrofit 和Java领域的ORM概念类似, ORM把结构化数据转换为Java对象,而Retrofit ...
- leetcode题解:Tree Level Order Traversal II (二叉树的层序遍历 2)
题目: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from ...
- 浅谈C#中ref与out的区别
在C#这门高级语言中,你是否注意过ref与out的用法?你是否为在调用方法时需要多个返回值呢?不用急,接下来,我们去一起去研究一下这个问题... 其实呢,C#语言中,参数的传递一共有两种方法,值传递和 ...
- struts2 零配置
一.新建一个web项目,命名为:struts2 二.导入strut2所需的jar包 所需jar下载:http://pan.baidu.com/s/1dDxP4Z3 三.配置struts2的启动文件,在 ...
- 10 个顶级 JavaScript 动画框架推荐
使用JavaScript可以做出一些引人注目的动画效果,但通常不太容易实现.本文为你整理了10个非常优秀的JavaScript动画框架,使用它们你可以轻松实现动画效果.1. RaphaëlRaphaë ...
- HTML <input> 标签的 maxlength 属性
前端的表单,需要进行验证. 结合JS表单验证框架,写了很多前端验证的代码. 其中,有这么一个需求:用户最多只能输入10个字符. 按照惯性,肯定是会去写JS表单验证了. 实际上,根本没有必要. HTML ...
- hdu 1530 最大团模板
说明摘自:pushing my way 的博文 最大团 通过该博主的代码,总算理解了最大团问题,但是他实现时的代码效率却不算太高.因此在最后献上我的模板.加了IO优化目前的排名是: 6 yejinru ...