<!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>