jquery效果 前边讲到jquery能实现隐藏、显示、切换,滑动,淡入淡出,以及动画,原来平时呆板的页面也可以由开发者轻轻松松地给它注入活力。 隐藏和显示 hide()和show()以及t
jquery效果
前边讲到jquery能实现隐藏、显示、切换,滑动,淡入淡出,以及动画,原来平时呆板的页面也可以由开发者轻轻松松地给它注入活力。
- 隐藏和显示 hide()和show()以及toggle()
$("#hide").click(function(){ $("p").hide();});$("#show").click(function(){ $("p").show();});
详细的语法再这里:
$(selector).hide(speed,callback); 其中speed是速度,单位是毫秒,也可以用slow和fast控制,callback是回调函数
toggle(): 用来切换 hide() 和 show() 方法
<script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); });});</script>
同理 toggle()函数的参数也是
toggle(speed,callback);
2.淡入和淡出
淡入fadeIn(speed,callback)淡出 fadeOut(speed,callback) 淡入淡出交替fadezToggle(speed,clallback)
重点看fadeTo函数:
$(selector).fadeTo(speed,opacity,callback); //opactiy 不透明度,[0,1],从清晰到模糊
3.滑动效果
上滑 slideUp(speed,callback)下滑slideDown(speed,callback) 交替滑动slideToggle(speed,callback)
4动画
- animate()用于创建自定义动画,可以操作元素
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });});
所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
当存在多个动画请求的时候,可以使用队列功能
$("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");});
2.stop()方法
stop(stopAll,goToEnd); stopall是布尔变量,默认false,意为清除动画队列 goToEnd 参数规定是否立即完成当前动画。默认是 false。
3方法链 将相同元素上运行的多条的jquery命令连接在一起
$("#p1").css("color","red").slideUp(2000).slideDown(2000);