1.show()和hide()和toggle()(这是show和hide的一个综合,一个按钮就实现显示和隐藏)
效果:
代码:
<button type="button" class="show">普通show</button> <button type="button" class="show1">一秒show</button> <button type="button" class="hidden">普通hidden</button> <button type="button" class="hidden1">一秒hidden</button> <div id="box" style=" 100px;height: 100px;background-color: red;"></div> <script type="text/javascript"> $(".show").click(function () { $("#box").show(); }) $(".show1").click(function () { $("#box").show(1000); }) $(".hidden").click(function () { $("#box").hide(); }) $(".hidden1").click(function () { $("#box").hide(1000); })
//还可以添加slow(200),fast(600),normal(400)三个参数,默认是400毫秒 </script>
实现列队动画:
效果:
代码:
<style> div{ background: red; color: #fff; margin-left: 5px; float: left; display: none; } </style> <div>你</div> <div>好</div> <div>吗</div> <div>?</div> <button type="button" class="show">显示列队动画</button> <button type="button" class="hide">隐藏列队动画</button> <script type="text/javascript"> $(".show").click(function () { //列队动画,递归自调用 $("div").first().show("fast",function testShow() { $(this).next().show("fast",testShow); }) }) $(".hide").click(function () { //列队动画,递归自调用 $("div").last().hide("fast",function testShow() { $(this).prev().hide("fast",testShow); }) }) </script>
2.滑动效果:包括slideUp()和slide()down和slideToggle()和上面实现方式一样的,效果呈现滑动效果
3.淡入淡出:包括fadeIn()和fadeOut()和fadeToggle()和上面实现方式也是一样的,效果呈现淡入淡出
但还有一个fadeTo('fast',0.3) 0.3是透明度