©2020-2024 ioDraw All rights reserved,
Privacy Policy
jQuery的动画的显示和隐藏特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style>
#aa { width: 200px; height: 200px; background-color: red; } .abc { transform:
rotate(360deg); transition: all 2s; } </style> <script src="js/jquery-3.3.1.js">
</script> <script> //加载dom的两种方式 //js和jQuery $(function() { //
$("#aa").on("click",function(){ // alert("11"); // }) //
$("#aa").bind("mouseover",function(){//事件 // alert("123"); // }) //
$("a").hover(function(){ // alert(1); // },function(){ // alert(2); // }) //
$("a").toggle(function() {//点击事件 // alert(1); // }, function() { // alert(2);
// })//1.9以上版本已经被取代为动画事件 //依次添加点击事件 // $("p").click(function(){ //
console.info("p被点击了"); // }) // $("div").click(function(){ //
console.info("div被点击了"); // return false;//阻止传播 // }) //
$("body").click(function(){ // console.info("body被点击了"); // }) //
$("#aa").on("click",function(e){ // console.info(e.pageX,e.pageY);//鼠标点击位置 // })
// // $("#aa").click(function(){ // console.info(111); // //
$("#aa").unbind("click");//点击事件移除 // }) //一次性效果 //
$("#aa").one("click",function(){ // console.info(11); // }) //点击两次可触发 // var
i=1; // $("#aa").click(function(){ // if(i%2==0){ // console.info(123); // } //
i++; // }) // $("#aa").hide(); $("#a").click(function() { $("#aa").show(1000); }
) $("#b").click(function() { $("#aa").hide(1000); }) $("#c").click(function() {
$("#aa").toggle(1000); }) //展开收入 // $("#aa").hide(); //
$("#a").click(function() { // $("#aa").slideDown(1000); // }) // //
$("#b").click(function() { // $("#aa").slideUp(1000); // }) //
$("#c").click(function() { // $("#aa").slideToggle(1000); // }) // 淡入淡出 //
$("#aa").hide(); // $("#a").click(function() { // $("#aa").fadeIn(1000); // })
// // $("#b").click(function() { // $("#aa").fadeOut(1000); // }) //
$("#c").click(function() { // $("#aa").fadeToggle(1000); // }) //
$("#d").click(function(){ // $("#aa").animate({ // width:100, // height:400 //
},1000) // }) // $("#d").click(function(){ // $("#aa").animate({ // left:100,
// top:100 // },2000) // }) // $("#d").click(function(){ //
$("#aa").addClass("abc"); // }) }) </script> </head> <body> <button id="a">显示</
button> <button id="b">隐藏</button> <button id="c">显示、隐藏切换</button> <button id="d
">变</button> <a href="#">显示</a> <div id="aa" style="text-align: center;position:
absolute;"> <p style="color: yellow;">这是一巴掌</p> </div> </body> </html>