划入显示详细信息

 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及其以上