<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ動畫</title> </head> <style> a{display: inline-block;background:#34daa2;border:1px solid #34daa2;padding:3px 15px;color: #fff;} .box{ background: plum; padding:20px; color: #fff; width: 300px; display: none; } .span2{ display: none; } </style> <body> <a href="#" onclick="boxClick()">點擊<span class="span1">▶</span> <span class="span2">▼</span></a> <div class="box"> 一、JQ鼠標事件<br /> 1.click()事件；<br /> 2.dbclick事件；(表單驗證、全選、反選)<br /> 3.focusin();獲取焦點事件，可作用於父級<br /> 4.focusout();失去焦點事件，可作用於父級<br /> 5.mousedown();鼠標按下事件，和click有區別（鼠標按下就觸發事件）<br /> 6.mouseup();鼠標抬起事件，和mousedown()事件結合起來就是click事件<br /> 7.mousemove()；鼠標移動事件<br /> 8.mouseover()；鼠標移入事件<br /> 9.mouseout()；鼠標移出事件<br /> 例：mouseover和mouseout可以寫成鏈式寫法：<br /> $('p').mouseenter(function(){<br /> $(this).css('color','pink')<br /> }).mouseleave(function(){<br /> $(this).css('color','blue')<br /> }) </div> </body> </html> <script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script> <script type="text/javascript"> function boxClick(){ if($('.box').is(':hidden')){ $('.box').slideDown(500); $('.span2').show(500); $('.span1').hide(500); }else{ $('.box').slideUp(500); $('.span2').hide(500); $('.span1').show(500); } } </script>