jQuery（五）——jQuery动画效果
目录javascript
1. jQuery显示与隐藏DOM；
<script type="text/javascript">
$(document).ready(function(){
//显示DOM
$("#b1").click(function(){
$("#p").show();
});
//隐藏DOM
$("#b2").click(function(){
$("#p").hide();
});
});
</script>
<body> <input type="button" id="b1" value="显示"/> <input type="button" id="b2" value="隐藏"/> <p id="p">手里剑</p> </body>
2. jQuery淡入和淡出DOM；
<script type="text/javascript">
$(document).ready(function(){
//淡出DOM
$("#b1").click(function(){
$("#p").fadeOut();
});
//淡入DOM
$("#b2").click(function(){
$("#p").fadeIn();
});
});
</script>
<body> <input type="button" id="b1" value="淡出"/> <input type="button" id="b2" value="淡入"/> <div id="p" style="width:100px; height:100px; background-color:red; margin:10px;"></div> </body>
固然还有一种能够切换淡入淡出的方法；code
其中，fadeToggle能够设置参数，快慢均可以，还能够设置淡入淡出的时间，功能很是强大！htm
<script type="text/javascript">
$(document).ready(function(){
//淡入淡出切换DOM
$("#b3").click(function(){
//$("#p").fadeToggle();
//$("#p").fadeToggle("fast");//设置淡入淡出的时间为快一些
$("#p").fadeToggle(5000);//设置时间为5s
});
});
</script>
这里设置的时间为5秒！ blog
还能够设置DOM的透明度；
fadeTo也能够设置参数，快慢都行；还有透明度的取值范围是0~1；
<script type="text/javascript">
$(document).ready(function(){
//设置DOM透明度
$("#b").click(function(){
$("#p1").fadeTo("slow",0.1);//透明度取值范围是0~1
$("#p2").fadeTo("slow",0.5);
$("#p3").fadeTo("slow",0.8);
});
});
</script>
<body> <input type="button" id="b" value="透明度"/> <div id="p1" style="width:100px; height:100px; background-color:red; margin:10px;"></div> <div id="p2" style="width:100px; height:100px; background-color:black; margin:10px;"></div> <div id="p3" style="width:100px; height:100px; background-color:yellow; margin:10px;"></div> </body>
有3中不一样的透明度显示：
3. jQuery滑动DOM；
<script type="text/javascript">
$(document).ready(function(){
//设置DOM向下滑动
$("#b1").click(function(){
$("#p").slideDown("slow");
})
//设置DOM向上滑动
$("#b2").click(function(){
$("#p").slideUp("slow");
})
});
</script>
<body> <input type="button" id="b1" value="向下滑动"/> <input type="button" id="b2" value="向上滑动"/> <div id="p" style="width:500px; height:100px; background-color:red; display:none;"> <p>手里剑</p> <p>影刃</p> </div> </body>
4. jQuery动画；
设置DOM结点向右移动；
<script type="text/javascript">
$(document).ready(function(){
//DOM向右移动
$("#b").click(function(){
$("#p").animate({left:'200px'},'slow');
})
});
</script>
<body> <input type="button" id="b" value="向左移动"/> <div id="p" style="width:100px; height:100px; background-color:red; margin:10px; position:absolute;"></div> </body>
来看看动画效果向右移动；
<script type="text/javascript">
$(document).ready(function(){
//动画效果向右移动
$("#b").click(function(){
$("#p").animate({
left:'200px',
opacity:0.5,
height:'150px',
width:'150px'
},'slow');
});
});
</script>
<body> <input type="button" id="b" value="动画效果向右移动"/> <div id="p" style="width:100px; height:100px; background-color:red; margin:10px; position:absolute;"></div> </body>
5. jQuery callBack回调方法；
<script type="text/javascript">
$(document).ready(function(){
$("#b").click(function(){
$("#p").show(function(){
alert("动画出来了！");
});
});
});
</script>
<body> <input type="button" id="b" value="回调事件"/> <p id="p" style="display:none">动画</p> </body>
6. jQuery暂停动画；
<script type="text/javascript">
$(document).ready(function(){
/* 向右移动 */
$("#b1").click(function(){
$("#p").animate({left:'500px'},'slow');
});
/* 暂停移动 */
$("#b2").click(function(){
$("#p").stop();
});
});
</script>
<body> <input type="button" id="b1" value="向右移动"/> <input type="button" id="b2" value="中止"/> <div id="p" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div> </body>