<!DOCTYPE html> <html> <head> <title>test1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $("#aa").click(function(){ //显示 //show() //$("#pic").show(3000); //fadeIn() //$("#pic").fadeIn(); //slideDown() //$("#pic").slideDown(); }); $("#bb").click(function(){ //隐藏 //hide //$("#pic").hide(3000); //fadeOut() //$("#pic").fadeOut(); //slideUp //$("#pic").slideUp(); }); $("#cc").click(function(){ $("#pic").toggle(); }); }); </script> </head> <body> <button id="aa">show</button> <button id="bb">hide</button> <button id="cc">toggle</button><br> <img src="../images/6.jpg" name="picture" id="pic" style="display:none"> </body> </html>
<!DOCTYPE html> <html> <head> <title>test2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $("#aa").click(function(){ $("#pic").animate({left:"+=300px"},3000) .animate({top:"+=300px",height:"500px"},3000,function(){ $(this).css({opacity:"0.5"}); }); }); $("#bb").click(function(){ //$("#pic").stop(); //暂停当前的，执行下一个动画 //$("#pic").stop(true); //清除队列 //$("#pic").stop(true,true);//直接到达目前动画的末状态 $("#pic").stop(false,true); }); }); </script> </head> <body> <button id="aa">go</button> <button id="bb">out</button><br> <img src="../images/6.jpg" name="picture" id="pic" style="position: absolute;"> </body> </html>