- .children()获取子标签,可以添加过滤
- .hover()鼠标悬浮时执行的动作,接收两个function,第一个表示鼠标移入,第二个表示鼠标移出。移入相当于mouseenter,移除相当于mouselave
- .stop()停止当前动画
- .animate()动画设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米官网案例</title> <script src="js/jquery-3.3.1.js"></script> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } #content{ width: 800px; border: 1px solid green; margin: 30px auto; } #content:after{ content: ''; display: block; clear: both; } #content li{ width: 190px; margin-left: 10px; margin-top: 10px; height: 250px; background-color: #FFE4C4; float: left; overflow: hidden; position: relative; } #content p{ position: absolute; width: 190px; height: 50px; overflow: hidden; line-height: 50px; top: 250px; background-color: #A9A9A9; } </style> </head> <body> <div id="content"> <ul> <li><p>快讯!俄罗斯申请加入联合国人权理事会</p></li> <li><p>快讯!俄罗斯申请加入联合国人权理事会</p></li> <li><p>快讯!俄罗斯申请加入联合国人权理事会</p></li> <li><p>快讯!俄罗斯申请加入联合国人权理事会</p></li> <li><p>快讯!俄罗斯申请加入联合国人权理事会</p></li> <li><p>快讯!俄罗斯申请加入联合国人权理事会</p></li> <li><p>快讯!俄罗斯申请加入联合国人权理事会</p></li> <li><p>快讯!俄罗斯申请加入联合国人权理事会</p></li> </ul> </div> </body> <script type="text/javascript"> $(function () { //.hover()两个参数,第一个表示鼠标移入时回调函数,第二个是移除时的回调函数 //.mouseenter进入,.mouseleave离开 $("#content li").hover(function () { $(this).children('p').stop(true).animate({top:200},100) },function () { $(this).children('p').stop(true).animate({top:250},100) }) }) </script> </html>