jQuery 编程 | jQuery 动画

简介: jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate()。.show()当提供一个 duration(持续时间)参数,.show()成为一个动画方法。.show()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作。持续时间是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。

一、动画
jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate()。
.show()
当提供一个 duration(持续时间)参数,.show()成为一个动画方法。.show()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作。
持续时间是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。
出了上述时间,还可以自定时间,接受毫秒为参数
jQuery默认只提供两个缓冲效果:调用 swing, 在一个恒定的速度进行;调用 linear. 更多的缓动函数要使用的插件
$("button").click(function () {
$("p").show("slow");
});
复制代码
.hide()
$("#hidr").click(function () {
$("div").hide(1000);
});
复制代码
.fadeIn()
通过淡入的方式显示匹配元素。
$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
复制代码
.fadeOut()
通过淡出的方式显示匹配元素。
$("p").fadeOut("slow");
复制代码
.animate()
$("#go").click(function(){
$("#block").animate({

width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"

}, 1500 );
});
复制代码
.slideDown()
用滑动动画显示一个匹配元素。
$("div").slideDown("slow");
复制代码
.slideUp()
$(document.body).click(function () {

if ($("div:first").is(":hidden")) {
    $("div").show("slow");
} else {
    $("div").slideUp();
}

});
复制代码
.delay()
设置一个延时来推迟执行队列中后续的项。
$("div.first").slideUp(300).delay(800).fadeIn(400);
复制代码
.clearQueue()
从列队中移除所有未执行的项。
$("#start").click(function () {

$("div").slideUp(300).delay(800).fadeIn(400);

})
$("#stop").click(function () {
var myDiv = $("div");
myDiv.clearQueue();
myDiv.stop();
});
复制代码
.fadeTo()
调整匹配元素的透明度。
透明度的值为:0~1
$(this).fadeTo("fast", Math.random());

相关文章
N..
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
211 1
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
|
8月前
|
JavaScript 内存技术
支持多种动画特效的响应式jQuery幻灯片插件
支持多种动画特效的响应式jQuery幻灯片插件
|
10月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
171 22
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
153 0
|
JavaScript 前端开发 UED
jQuery 动画
【10月更文挑战第8天】
184 55
|
11月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
299 9
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
149 1
|
11月前
|
JavaScript 前端开发
jquery输入框键入文字动画特效
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时,通过jquery代码来制作文字的动画效果,非常炫酷。
123 0
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
109 4