在jQuery中有许多可视的效果,而且非常的方便,下面总结一下常见的效果
1. jQuery的隐藏和显示
jQuery hide() 隐藏对应的html标签
$("#test").click(function(){
$("p").hide();
});
jQuery show() 显示对应的html标签
$("#test").click(function(){
$("p").show();
});
jQuery toggle() 切换hide()和show()
$("#test").click(function(){
$("p").toggle();
});
2. jQuery的淡入和淡出
jQuery fadeIn(); 淡入
$(selector).fadeIn(speed,callback);
speed 可选“slow”、“fast”和毫秒
$(selector).fadeOut(speed,callback);
jQuery fadeToggle(); 淡入和淡出切换
$(selector).fadeToggle(speed,callback);
jQuery fadeTo(): 可以给定不透明度
$(selector).fadeTo(speed,opacity,callback);
3. jQuery滑动
jQuery slideDown() 下滑
$(selector).slideDown(speed,callback);
jQuery slideUp() 上滑
$(selector).slideUp(speed,callback);
jQuery slideToggle() 下滑和上滑切换
$(selector).slideToggle(speed,callback);
4.jQuery动画
jQuery animate() 方法创建自定义动画
$(selector).animate({params},speed,callback); 其中params参数是必须输入的自定义动画的css属性
注意:对位置进行操作时,首先必须把CSS的position属性设置为relative、fixed、absolute
例子:
$("#test").click(function(){
$("div").animate({
left:'120px',
opacity:'0.5'
height:'100px',
width:'100px'
});
})
5. stop()
jQuery stop() 可以停止滑动和动画
$(selector).stop(stopAll,goToEnd); 参数stopAll是否清除当前动画队列,goToEnd参数规定是否立即完成当前动画,两个参数默认都是false
例子:
$("#stop").click(function(){
$("#test").stop();
});
6. Callback
jQuery Callback函数
当效果动画100%完成后,即可调用Callback函数,上面交的隐藏、 显示、淡入、淡出、滑动、动画都可以用这个函数
例子:
$("#test").hide(3000,function(){
alert("test the callback");
})
7. Chaining
jQuery Chaining 允许一条语句执行多个jQuery方法
例子
$("#test").slideUp(2000).slideDown(2000).fadeIn(2000).fadeOut(2000);
参见: http://www.w3school.com.cn/jquery/jquery_hide_show.asp