1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>划入显示详细信息</title> 6 <script src="../base/jquery-3.1.0.js"></script> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 list-style: none; 12 } 13 14 .img { 15 width: 250px; 16 height: 200px; 17 border: 0; 18 display: block; 19 } 20 21 .con { 22 width: 250px; 23 height: 200px; 24 overflow: hidden; 25 } 26 27 .showDetails { 28 width: 250px; 29 height: 200px; 30 background: #abcdef; 31 text-align: center; 32 line-height: 200px; 33 color: darkmagenta; 34 } 35 </style> 36 </head> 37 <body> 38 <ul id="box"> 39 <li class="con con1"> 40 <img src="../images/1.jpg" class="img img1"> 41 <div class="showDetails showDetails1"> 42 美女一 43 </div> 44 </li> 45 <li class="con con2"> 46 <img src="../images/2.jpg" class="img img2"> 47 <div class="showDetails showDetails2"> 48 美女二 49 </div> 50 </li> 51 </ul> 52 </body> 53 <script> 54 $(function () { 55 56 var moveHeight = 200, 57 moveTime = 200, 58 timer = null; 59 60 $("#box li").hover(function () { 61 var curLi = $(this); 62 timer = setTimeout(function () { 63 curLi.children(".img").animate({marginTop: -moveHeight + "px"}, moveTime); 64 }, moveTime) 65 }, function () { 66 clearTimeout(timer); 67 $(this).children(".img").animate({marginTop: 0 + "px"}, moveTime); 68 }) 69 }); 70 </script> 71 </html>
代码效果说明：鼠标划入图片显示图片的详细信息
注意点：
一、img应该设置display:block,不然会和其下面的块级元素(div)之间产生间隙
二，注意这里setTimeout的使用，防止动画一直动。
三，代码当然完全可以用transition写，也简单。但是它的只兼容ie10及其以上