jquery隐藏、显示事件and提示callback、淡入淡出fadeToggle、滑入滑出slideToggle、动画animate停止动画stop
程序员文章站
2022-05-08 21:18:56
...
1.jquery隐藏and显示事件
$("p").hide(); //隐藏事件 $("p").hide(1000); //1秒内缓慢隐藏 $("p").show(); //显示事件 $("p").toggle(); //在隐藏和显示中切换
隐藏后显示提示callback
$("p").hide(function(){ alert("提示消息已经隐藏"); }); $("p").hide(1000,function(){ alert("1s内缓慢隐藏并提示消失已经隐藏"); });
2.淡入淡出
$("#p1").fadeIn(); //淡入$("#p2").fadeIn("slow"); //缓慢淡入$("#p3").fadeIn(3000); //延迟3秒淡入 $("#p").fadeOut() //淡出 $("#p").fadeToggle() //淡入淡出 $("#p3").fadeTo("slow",0.7); //设置淡化程度 0完全消失,1不淡化
3.滑入滑出
$(".panel").slideDown(); //向下滑动显示class=panel的p $(".panel").slideUp("slow"); //向上收起class=panel的p $(".panel").slideToggle("slow"); //点击显示,再点击收起
例子如下:
<head> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); //点击向下滑动显示p,再次点击收起 }); }); </script> <style type="text/css"> p.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } p.panel { height:120px; display:none; /*设置隐藏的p*/ } </style> </head> <body> <p class="panel"> <p>显示隐藏的p</p> <p>请大家关注我的博客</p> </p> <p class="flip">点击显示,再次点击隐藏</p> </body>
4.动画animate
首先,说明一下为什么要调用animate,而不是直接修改css属性:用animate可以缓慢的修改p的样式,动画效果更加美观,而直接修改css则是加载闪烁直接完成,效果不佳。
默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
例子:
<head> <script> $(document).ready(function(){ $("button").click(function(){ $("p").animate({ left:'250px', opacity:'0.5', //淡化 height:'150px', width:'150px' //height:'+=150px', //可使用相对值 //width:'+=150px' //height:'toggle', //使用预定值,从消失到显示 //width:'toggle' }); }); }); </script> </head> <body> <button>开始动画</button> <p style="background:#98bf21;height:100px;width:100px;position:absolute;"></p> </body>
分步动画
<script> $(document).ready(function(){ $("button").click(function(){ var p=$("p"); // 定义变量 p到指定位置 p.animate({height:'300px',opacity:'0.4'},"slow"); p.animate({width:'300px',opacity:'0.8'},"slow"); p.animate({height:'100px',opacity:'0.4'},"slow"); p.animate({width:'100px',opacity:'0.8'},"slow"); }); }); </script>
5.停止动画
$("p").stop(); //按钮会停止当前活动的动画,但允许已排队的动画向前执行。 $("p").stop(true); //按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。 $("p").stop(true,true); //会立即完成当前活动的动画,然后停下来。
以上就是jquery隐藏、显示事件and提示callback、淡入淡出fadeToggle、滑入滑出slideToggle、动画animate停止动画stop的详细内容,更多请关注其它相关文章!
上一篇: php模版解析类