- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章jQuery 动画效果代码分享由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
一.显示、隐藏 。
jQuery 中显示方法为:.show(),隐藏方法为:.hide()。在无参数的时候,只是硬性的显示内容和隐藏内容.
1
2
3
4
5
6
|
$(
'.show'
).click(
function
(){
//设置个触发事件
$(
'#box'
).show();
//显示
});
$(
'.hide'
).click(
function
(){
//设置个触发事件
$(
'#box'
).hide();
//隐藏
});
|
在.show()和.hide()方法可以传递一个参数,这个参数以毫秒(1000 毫秒等于 1 秒钟)来控 制速度。并且里面富含了匀速变大变小,以及透明度变换.
1
2
3
4
5
|
$(
'.show'
).click(
function
(){
$(
'#box'
).show(1000);
//显示用了 1 秒
}); $(
'.hide'
).click(
function
(){
$(
'#box'
).hide(1000);
//隐藏用了 1 秒
});
|
除了直接使用毫秒来控制速度外,jQuery 还提供了三种预设速度参数字符串:slow、 normal 和 fast,分别对应 600 毫秒、400 毫秒和 200 毫秒.
1
2
3
|
$(
'#box'
).show(
'slow'
);
//600 毫秒
$(
'#box'
).show(
'normal'
);
//400 毫秒
$(
'#box'
).show(
'fast'
);
//200 毫秒
|
注意:不管是传递毫秒数还是传递预设字符串,如果不小心传递错误或者传递空字符串。 那么它将采用默认值:400 毫秒.
使用.show()和.hide()的回调函数,可以实现列队动画效果.
(1)使用函数名调用自身 。
1
2
3
4
5
|
$(
'.show'
).click(
function
(){
$(
'#box'
).show(
'slow'
,
function
showspan(){
$(
this
).next().show(
'slow'
,showspan);
});
})
|
(2)使用 arguments.callee 匿名函数自调用 。
1
2
3
4
5
|
$(
'.show'
).click(
function
(){
$(
'#box'
).show(
'slow'
,
function
(){
$(
this
).next().show(
'slow'
,arguments.callee);
});
})
|
我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判 断。而 jQuery 提供给我们一个类似功能的独立方法:.toggle().
1
2
3
|
$(
'.toggle'
).click(
function
(){
$(
this
).toggle(
'slow'
);
});
|
二.滑动、卷动 jQuery 提供了一组改变元素高度的方法:.slideUp()、.slideDown()和.slideToggle()。顾名 思义,向上收缩(卷动)和向下展开(滑动).
1
2
3
4
5
6
7
8
9
|
$(
'.down'
).click(
function
(){
//向下滑动
$(
'#box'
).slideDown();
});
$(
'.up'
).click(
function
(){
//向上滑动
$(
'#box'
).slideUp();
});
$(
'.toggle'
).click(
function
(){
//切换
$(
'#box'
).slideToggle();
});
|
注意:滑动、卷动效果和显示、隐藏效果一样,具有相同的参数.
三.淡入、淡出 。
jQuery 提供了一组专门用于透明度变化的方法:.fadeIn()和.fadeOut(),分别表示淡入、 淡出,当然还有一个自动切换的方法:.fadeToggle().
1
2
3
4
5
6
7
8
9
|
$(
'.in'
).click(
function
(){
//淡入
$(
'#box'
).fadeIn(
'slow'
);
});
$(
'.out'
).click(
function
(){
//淡出
$(
'#box'
).fadeOut(
'slow'
);
});
$(
'.toggle'
).click(
function
(){
//切换
$(
'#box'
).fadeToggle();
});
|
上面三个透明度方法只能是从 0 到 100,或者从 100 到 0,如果我们想设置指定值就没 有办法了。而 jQuery 为了解决这个问题提供了.fadeTo()方法.
1
2
3
|
$(
'.toggle'
).click(
function
(){
$(
'#box'
).fadeTo(
'slow'
,0.33);
//0.33 表示值为 33%
});
|
ps:值数为0到1,对应百分比 。
四.自定义动画 。
jQuery 提供了几种简单常用的固定动画方面我们使用。但有些时候,这些简单动画无法 满足我们更加复杂的需求。这个时候,jQuery 提供了一个.animate()方法来创建我们的自定 义动画,满足更多复杂多变的要求.
1
2
3
4
5
6
7
|
$(
'.animate'
).click(
function
(){
$(
'#box'
).animate({
'width'
:
'300px'
,
'fontSize'
:
'50px'
,
'opacity'
:0.5
});
});
|
注意:一个 CSS 变化就是一个动画效果,上面的例子中,已经有四个 CSS 变化,已经 实现了多重动画同步运动的效果.
必传的参数只有一个,就是一个键值对 CSS 变化样式的对象。还有两个可选参数分别 为速度和回调函数.
1
2
3
4
5
6
7
8
|
$(
'.animate'
).click(
function
(){
$(
'#box'
).animate({
'width'
:
'500px'
,
'height'
:
'400px'
,
},2000,
function
(){
alert(
'执行完毕'
);
});
});
|
到目前位置,我们都是创建的固定位置不动的动画。如果想要实现运动状态的位移动画, 那就必须使用自定义动画,并且结合 CSS 的绝对定位功能.
1
2
3
4
5
6
|
$(
'.animate'
).click(
function
(){
$(
'#box'
).animate({
'top'
:
'300px'
,
//先必须设置 CSS 绝对定位
'left'
:
'200px'
});
});
|
ps:必须先在css里设置参照物,绝对定位 。
自定义动画中,每次开始运动都必须是初始位置或初始状态,而有时我们想通过当前位 置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能.
1
2
3
4
5
6
7
|
$(
'.animate'
).click(
function
(){
$(
'#box'
).animate({
left:
'+=100px'
,
width:
'+=100px'
,
height:
'+=100px'
});
});
|
五.列队动画方法 。
之前我们已经可以实现列队动画了,如果是同一个元素,可以依次顺序或连缀调用。如 果是不同元素,可以使用回调函数。但有时列队动画太多,回调函数的可读性大大降低。为 此,jQuery 提供了一组专门用于列队动画的方法.
//连缀无法实现按顺序列队 $('#box').slideUp('slow').slideDown('slow').css('background','orange'),
注意:如果动画方法,连缀可以实依次列队,而.css()方法不是动画方法,会在一开始传入列队之前。那么,可以采用动画方法的回调函数来解决.
1
2
3
4
|
//使用回调函数,强行将.css()方法排队到.slideDown()之后
$(
'#box'
).slideUp(
'slow'
).slideDown(
'slow'
,
function
({
$(
this
).css(
'background'
,
'orange'
);
});
|
但如果这样的话,当列队动画繁多的时候,可读性不但下降,而原本的动画方法不够清 晰。所以,我们的想法是每个操作都是自己独立的方法。那么 jQuery 提供了一个类似于回 调函数的方法:.queue().
1
2
3
4
|
//使用.queue()方法模拟动画方法跟随动画方法之后
$(
'#box'
).slideUp(
'slow'
).slideDown(
'slow'
).queue(
function
(){
$(
this
).css(
'background'
,
'orange'
);
});
|
现在,我们想继续在.queue()方法后面再增加一个隐藏动画,这时发现居然无法实现。 这是.queue()特性导致的。解决方法:jQuery的.queue()的回调函数可以 传递一个参数,这个参数是 next 函数,在结尾处调用这个 next()方法即可再连缀执行列队动画.
1
2
3
4
|
//使用 next 参数来实现继续调用列队动画 $('#box').slideUp('slow').slideDown('slow').queue(function(next{
$(
this
).css(
'background'
,
'orange'
);
next();
}).hide(
'slow'
);
|
ps:.queue()方法还有一个功能,就是可以得到当前动画个列队的长度(具体不做演示) 。
jQuery 还提供了一个清理列队的功能方法:.clearQueue()。把它放入一个列队的回调函 数或.queue()方法里,就可以把剩下为执行的列队给移除.
1
2
3
4
|
//清理动画列队
$(
'#box'
).slideDown(
'slow'
,
function
(){
$(
this
).clearQueue()
});
|
六.动画相关方法 。
很多时候需要停止正在运行中的动画,jQuery 为此提供了一个.stop()方法。它有两个可 选参数:.stop(clearQueue,gotoEnd);clearQueue 传递一个布尔值,代表是否清空未执行完的 动画列队,gotoEnd 代表是否直接将正在执行的动画跳转到末状态.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(
'.animate'
).click(
function
(){
$(
'#box'
).animate({
'left'
:
'300px'
},1000);
$(
'#box'
).animate({
'top'
:
'300px'
},1000);
$(
'#box'
).animate({
'width'
:
'300px'
},1000);
$(
'#box'
).animate({
'height'
:
'300px'
},1000);
});
$(
'.stop'
).click(
function
(){
$(
'#box'
).stop(
true
,
false
);
});
|
//注意:第一个参数表示是否取消列队动画,默认为 false。如果参数为 true,当有列队动 画的时候,会取消后面的列队动画。第二参数表示是否到达当前动画结尾,默认为 false。 如果参数为 true,则停止后立即到达末尾处。可以自行复制体验.
有时在执行动画或列队动画时,需要在运动之前有延迟执行,jQuery 为此提供了.delay() 方法。这个方法可以在动画之前设置延迟,也可以在列队动画中间加上.
1
2
3
4
5
6
7
8
9
10
11
|
//开始延迟 1 秒钟,中间延迟 1 秒
$(
'.animate'
).click(
function
(){
$(
'#box'
).delay(1000).animate({
'left'
:
'300px'
},1000);
$(
'#box'
).animate({
'bottom'
:
'300px'
},1000);
$(
'#box'
).delay(1000).animate({
'width'
:
'300px'
},1000);
$(
'#box'
).animate({
'height'
:
'300px'
},1000);
});
|
arguments.callee 在哪一个函数中运行,它就代表哪一个函数。 一般用在匿名函数中。在匿名函数中有时会需要自己调用自己,但是由于是匿名函数,没有名字,无名可调。这时就可以用arguments.callee来代替匿名的函数 。
1
2
3
4
|
//递归执行自我,无限循环执行
$(
'#box'
).slideToggle(
'slow'
,
function
(){
$(
this
).slideToggle(
'slow'
,arguments.callee);
});
|
$.fx.off属性可以关闭所有动画效果.
$.fx.off=true; //默认为 false 。
均理解完毕.
以上所述是小编给大家介绍的 jQuery 动画效果代码分享,希望对大家有所帮助.
原文链接:http://blog.csdn.net/unamattin/article/details/53140587 。
最后此篇关于jQuery 动画效果代码分享的文章就讲到这里了,如果你想了解更多关于jQuery 动画效果代码分享的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我尝试理解[c代码 -> 汇编]代码 void node::Check( data & _data1, vector& _data2) { -> push ebp -> mov ebp,esp ->
我需要在当前表单(代码)的上下文中运行文本文件中的代码。其中一项要求是让代码创建新控件并将其添加到当前窗体。 例如,在Form1.cs中: using System.Windows.Forms; ..
我有此 C++ 代码并将其转换为 C# (.net Framework 4) 代码。有没有人给我一些关于 malloc、free 和 sprintf 方法的提示? int monate = ee; d
我的网络服务器代码有问题 #include #include #include #include #include #include #include int
给定以下 html 代码,将列表中的第三个元素(即“美丽”一词)以斜体显示的 CSS 代码是什么?当然,我可以给这个元素一个 id 或一个 class,但 html 代码必须保持不变。谢谢
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 7 年前。
我试图制作一个宏来避免重复代码和注释。 我试过这个: #define GrowOnPage(any Page, any Component) Component.Width := Page.Surfa
我正在尝试将我的旧 C++ 代码“翻译”成头条新闻所暗示的 C# 代码。问题是我是 C# 中的新手,并不是所有的东西都像 C++ 中那样。在 C++ 中这些解决方案运行良好,但在 C# 中只是不能。我
在 Windows 10 上工作,R 语言的格式化程序似乎没有在 Visual Studio Code 中完成它的工作。我试过R support for Visual Studio Code和 R-T
我正在处理一些报告(计数),我必须获取不同参数的计数。非常简单但乏味。 一个参数的示例查询: qCountsEmployee = ( "select count(*) from %s wher
最近几天我尝试从 d00m 调试网络错误。我开始用尽想法/线索,我希望其他 SO 用户拥有可能有用的宝贵经验。我希望能够提供所有相关信息,但我个人无法控制服务器环境。 整个事情始于用户注意到我们应用程
我有一个 app.js 文件,其中包含如下 dojo amd 模式代码: require(["dojo/dom", ..], function(dom){ dom.byId('someId').i
我对“-gencode”语句中的“code=sm_X”选项有点困惑。 一个例子:NVCC 编译器选项有什么作用 -gencode arch=compute_13,code=sm_13 嵌入库中? 只有
我为我的表格使用 X-editable 框架。 但是我有一些问题。 $(document).ready(function() { $('.access').editable({
我一直在通过本教程学习 flask/python http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-wo
我想将 Vim 和 EMACS 用于 CNC、G 代码和 M 代码。 Vim 或 EMACS 是否有任何语法或模式来处理这种类型的代码? 最佳答案 一些快速搜索使我找到了 this vim 和 thi
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 想改进这个问题?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve this
这个问题在这里已经有了答案: Enabling markdown highlighting in Vim (5 个回答) 6年前关闭。 当我在 Vim 中编辑包含 Markdown 代码的 READM
我正在 Swift3 iOS 中开发视频应用程序。基本上我必须将视频 Assets 和音频与淡入淡出效果合并为一个并将其保存到 iPhone 画廊。为此,我使用以下方法: private func d
pipeline { agent any stages { stage('Build') { steps { e
我是一名优秀的程序员,十分优秀!