jQuery 动画
来源:互联网 发布:生化危机5 知乎 编辑:程序博客网 时间:2024/06/03 17:32
$("p").hide();
});
$("#show").click(function(){
$("p").show();
}); toggle() 可以使用 toggle() 方法来切换 hide() 和 show() 方法。 $("button").click(function(){
$("p").toggle();
}); fadeIn()和fadeOut() 淡入和淡出可见元素。 $("button").click(function(){
$("#div").fadeOut(3000);
$("#div").fadeIn(3000);
}); fadeToggle() 可以使用fadeToggle()方法来切换fadeIn() 与 fadeOut() 方法。 $("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}); fadeTo() fadeTo()方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。 $("button").click(function(){
$("#div1").fadeTo("slow",0.15);
}); slideUp()和slideDown() 向上和向下滑动元素。 $("#flip").click(function(){
$("#panel").slideUp(1000);
$("#panel").slideDown(1000);
}); slideToggle() 可以使用 slideToggle() 方法来切换 slideUp() 与 slideDown() 方法。 $("#flip").click(function(){
$("#pane").slideToggle();
}); animate() animate() 方法允许您创建自定义的动画。 $("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'+=150px',
width:'-=150px'
});
}); stop() stop() 方法用于在动画或效果完成前对它们进行停止。 $("#stop").click(function(){
$("#panel").stop();
});
显示/隐藏
(1)hide() 和 show()
在 jQuery 中,可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
语法
$(selector).hide(speed,callback);$(selector).show(speed,callback);
注意:以下的speed和callback参数说明对于本文介绍的其他方法均适用。所以下文不再赘述。
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 、"normal"或毫秒数。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
范例代码
如下代码的作用是:点击按钮后,触发<p>元素的隐藏动作,速度为1000毫秒,动作结束后,弹出“已经隐藏”提示。
$("button").click(function(){$("p").hide(1000, function(){alert("已经隐藏");});});
(2)toggle()
在jQuery中,可以使用 toggle() 方法来切换 hide() 和 show() 方法。
语法
$(selector).toggle(speed,callback);
参数说明可以参考 hide() 和 show()。
淡入 / 淡出
(1)fadeIn() 和 fadeOut()
在 jQuery 中,可以使用 fadeIn() 和 fadeOut() 方法来淡入和淡出 HTML 元素。
语法
$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);
参数说明可以参考 hide() 和 show()。
(2)fadeToggle()
在jQuery中,可以使用fadeToggle()方法来切换fadeIn() 与 fadeOut() 方法。
语法
参数说明可以参考 hide() 和 show()。
(3)fadeTo()
在jQuery中,fadeTo()方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
其余参数说明可以参考 hide() 和 show()。
滑动
(1)slideUp() 和 slideDown()
在 jQuery 中,可以使用 slideUp() 和 slideDown() 方法来向上滑动、向下滑动元素。
语法
$(selector).slideDown(speed,callback);
参数说明可以参考 hide() 和 show()。
(2)slideToggle()
在 jQuery 中,可以使用 slideToggle() 方法来切换 slideUp() 与 slideDown() 方法。
语法
参数说明可以参考 hide() 和 show()。
动画
animate()
在jQuery中,animate() 方法允许创建自定义的动画。
语法
必需的 params 参数定义形成动画的 CSS 属性。
其余参数说明可以参考 hide() 和 show()。
范例代码
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
停止动画
stop()
在jQuery中,stop() 方法用于在动画或效果完成前对它们进行停止。
语法
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
- jQuery动画
- jquery动画
- jQuery动画
- jQuery动画
- jQuery动画
- jquery 动画
- JQuery动画
- jquery 动画
- jQuery动画
- jquery动画
- jquery动画
- jQuery-动画
- jquery动画
- jquery动画
- jQuery动画
- jQuery动画
- jQuery动画
- jquery 动画
- jQuery 简介和安装
- JavaScript变量和数据类型
- jQuery 选择器
- jQuery DOM操作
- jQuery 事件
- jQuery 动画
- 史上最全设计模式导学目录(完整版)
- jQuery Ajax
- JavaScript
- jQuery 图像裁剪插件Jcrop
- JAVA 设计模式 模板方法模式
- JAVA 设计模式 组合模式
- 查找日期区间的所有周末
- JAVA 设计模式 适配器模式