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="width: 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是透明度