1、jQuery之隐藏与显示
HTML代码
<p id="p"> hello world</p> <button id="btn">隐藏</button> <button id="btn2">显示</button> <button id="btn3">显示/隐藏</button>
js代码
/** * 显示与隐藏 * show hide */ $(document).ready(function(){ $("#btn").on("click",function(){ $("p").hide(1000); //隐藏 一秒的隐藏 }) ; $("#btn2").on("click",function(){ $("p").show(1000); //显示 一秒的动画 }); $("#btn3").on("click",function(){ $("p").toggle(1000); //这是个开关 功能是显示/隐藏 }); });
创建五个div标签 点击加动画隐藏
<script> for(var i =0;i<5;i++){ $("<div>").appendTo(document.body);//将<div>标签添加到body标签里 } $("div").on("click",function(){ $(this).hide(1000,function(){ //一秒后隐藏并且把div这个标签移除 $(this).remove(); }); }); </script>
2、jQuery之淡入淡出
HTML代码
<button id="in">淡入</button> <button id="out">淡出</button> <button id="toggle">开关</button> <button id="to">设置透明度</button> <div style="background-color: aqua"></div> <div style="background-color: antiquewhite"></div> <div style="background-color: blue"></div>
js代码
/** * 淡入淡出 * fadeIn fadeOut fadeToggle fadeTo */ $(document).ready(function(){ $("#in").on("click",function(){ $("div").fadeIn(1000); //淡入 动画时间为一秒 }); $("#out").on("click",function(){ $("div").fadeOut(1000); // 淡出 动画时间为一秒 }); $("#toggle").on("click",function(){ $("div").fadeToggle(1000); // 淡入淡出的动画 }); $("#to").on("click",function(){ $("div").fadeTo(1000,0.1); // 将div的透明度设为0.1 一秒的动画显示 }); });
3、jQuery之滑动动画
HTML代码
<button id="down">显示</button> <button id="up">隐藏</button> <button id="toggle">隐藏/显示</button> <div style="width:500px; height: 500px; background-color: aqua">
js代码
/** * 滑动 * slideDown slideUp slideToggle */ $(document).ready(function(){ $("#down").on("click",function(){ $("div").slideDown(1000);//显示 }) $("#up").on("click",function(){ $("div").slideUp(1000); //隐藏 }) $("#toggle").on("click",function(){ $("div").slideToggle(1000);//开关 }) });4、jQuery之回调
HTML代码
<button id="btn">按钮</button> <p> this is a callback</p>
js代码
$(document).ready(function(){ $("#btn").on("click",function(){ //$("p").hide(1000,function(){ //动画完毕执行的回调方法 // alert("动画执行完毕"); //}); $("p").css("color","red").slideUp(1000).slideDown(1000); //先隐藏在显示,在执行动画时文字的颜色变为红色 }); });