jQuery效果-淡入淡出-滑动-回调
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../JQuery/jquery-1.8.0.min.js"></script> <script src="JavaScript1.js"></script> <style> #content, #flipshow, #fliphide, #fliptoggle { padding: 5px; /*边距*/ text-align: center; /*文字居中*/ background-color: #ffd800; border: solid 1px #ff6a00; /*边框1px*/ } #content { padding: 50px; /*边距*/ display: none; /*内容隐藏*/ } </style> </head> <body> <!--淡入淡出--> <button id="in">fadeIn</button> <button id="out">fadeOut</button> <button id="toggle">fadetoggle</button> <button id="to">fadeto</button> <div id="div1" style="width:80px;display:none; height:80px;background-color:aqua"></div> <div id="div2" style="width: 80px; display: none; height: 80px; background-color: #b6ff00"></div> <div id="div3" style="width: 80px; display: none; height: 80px; background-color: #0026ff"></div> <!--滑动--> <div id="flipshow">出现</div> <div id="fliphide">隐藏</div> <div id="fliptoggle">隐藏显示</div> <div id="content">Hello World</div> <!--回调--> <button id="btn1">隐藏</button> <p>hello Worldhello Worldhello World</p> </body> </html>
JS文件：
$(document).ready(function () {
//显示隐藏
$("#in").on("click", function () {
$("#div1").fadeIn(1000);
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").on("click", function () {
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").on("click", function () {
//$("#div1").fadeToggle(1000);
//$("#div2").fadeToggle(1000);
//$("#div3").fadeToggle(1000);
console.log("D" + document);
console.log("D");
});
$("#to").on("click", function () {
$("#div1").fadeTo(1000,0.5);//第二个参数为透明度0-1
$("#div2").fadeTo(1000,0.7);
$("#div3").fadeTo(1000,0.3);
});
//滑动
$("#flipshow").click(function () {
$("#content").slideDown(1000);//隐藏到显示为1S
})
$("#fliphide").click(function () {
$("#content").slideUp(1000);//显示到隐藏为1S
})
$("#fliptoggle").click(function () {
$("#content").slideToggle(1000);//
})
//回调
$("#btn1").click(function () {
$("p").hide(1000, function () {
alert("动画结束方法被回调");
});
//执行多个动画
$("p").css("color", "red").slideUp(1000).slideDown(1000);
});
});
