The simple special effects of jQuery, mainly show and hide, fade in and out, transparency, sliding and callback.
Post the total code first
<!DOCTYPE html>
<html>
<head>
<title>jQuery特效</title>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<style type="text/css">
div{
width: 40px;
height: 40px;
float: left;
background-color: blue;
margin-right: 10px;
}
#content{
padding: 50px;
display: none;
}
#flipshow,#content,#fliphide,#fliptoggle{
padding: 5px;
text-align: center;
background-color: aquamarine;
border: 1px solid green;
}
</style>
</head>
<body>
<!-- 淡入淡出 -->
<div id="div1" style="width: 40px;height: 40px;display: none;background-color: aquamarine;"></div>
<div id="div2" style="width: 40px;height: 40px;display: none;background-color: palegreen;"></div>
<div id="div3" style="width: 40px;height: 40px;display: none;background-color: palevioletred;"></div>
<button id="in">fade in</button>
<button id="out">fade out</button>
<button id="toggle">fade toggle</button>
<button id="to">fade to</button>
<!-- 滑动 -->
<div id="flipshow">显示</div>
<div id="fliphide">隐藏</div>
<div id="fliptoggle">显示/隐藏</div>
<div id="content">Hello jQuery</div>
<!--回调-->
<p>Hello World</p>
<button id="btn">隐藏</button>
<script type="text/javascript">
//jQuery特效之显示与隐藏
$(function(){
for (var i = 0; i < 5; i++) {
$("<div>").appendTo(document.body);
};
$("div").click(function(){
$(this).hide(1000);
});
//jQuery特效之淡入淡出与透明度
$("#in").on("click",function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn(2000);
$("#div3").fadeIn(1500);
});
$("#out").click(function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").on("click",function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});
//透明度设置 0是完全透明，1是完全不透明
$("#to").click(function(){
$("#div1").fadeTo(1000,0.5);
$("#div2").fadeTo(1000,1);
$("#div3").fadeTo(1000,0);
});
//jQuery特效之滑动
$("#flipshow").click(function(){
$("#content").slideDown(1000);
});
$("#fliphide").click(function(){
$("#content").slideUp(1000);
});
$("#fliptoggle").click(function(){
$("#content").slideToggle(1000);
});
//jQuery特效之回调
$("#btn").click(function(){
$("p").hide(1000,function(){
alert("回调完成");
});
});
});
//综合
$("p").css("color","red").slideUp(1000).slideDown(1000).slideUp(2000);
</script>
</body>
</html>Show and hide
show and hide the main use of the hide, show, and toggle methodsFade and transparency
fade using fadeIn, fadeOut, and methods fadeToggle
transparency fadeTo method is to use a second parameter representation method fadeTo transparency.
Where 0 means completely transparent, 1 means completely opaqueSliding
the slide use is slideDown, slideUp, and a method slideToggleCallback
process callback is executed after the animation effects to go perform an operation