上篇博客我们讲过了jquery的基础知识——强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现。
因为动画的效果不能截图为大家展示,大家可以自行实验。
一、显示隐藏
1、jquery中通过hide() 和 show() 方法来隐藏和显示 HTML 元素:
<span style="font-size:18px;">$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
</span>
2、通过toggle() 方法来切换 hide() 和 show() 方法。
<span style="font-size:18px;">$("button").click(function(){
$("p").toggle();
});</span>
二、淡入淡出
fadeIn() 用于淡入已隐藏的元素。
<span style="font-size:18px;">$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});</span>
fadeOut() 方法用于淡出可见元素。
<span style="font-size:18px;">$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
</span>
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
<span style="font-size:18px;">$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
</span>
三、滑动
滑动和上显示隐藏与淡入淡出的实现方法基本相同 。
方法名 | 含义 |
|
slideDown
| 用于向下滑动元素 | |
slideUp | 用于向上滑动元素 |
|
slideToggle | 如果元素向下滑动,则 slideToggle() 可向上滑动它们。 如果元素向上滑动,则 slideToggle() 可向下滑动它们。 |
|
四、自定义动画
自定义动画可以说既简单又复杂。简单说的是它只需要一个函数,复杂指的是这个函数可以添加n多个属性。
1、语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
例如:
$("button").click(function(){
$("div").animate({left:'250px'});
});
提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
2、jQuery animate() - 操作多个属性
<span style="font-size:18px;">$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
</span>
3、jQuery animate() - 使用队列功能
<span style="font-size:18px;">$("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");
});
</span>
五、动画停止
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
解释:
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
<span style="font-size:18px;">$("#stop").click(function(){
$("#panel").stop();
});</span>
最后:jquery为我们提供的几种动画,实现简单、功能强大,有了jquery,在javascript中非常令人头疼的动画制作变得极为容易,有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手!