自定义滑入滑出动画
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.7.1.min.js"></script> <style> .a { float:left; 100px; height:40px; background-color:darkblue; overflow:hidden; margin-left:20px; } .b { 100px; top:40px; position:relative; background-color:yellow; } </style> </head> <body> <form id="form1" runat="server"> <div class="a"> <div class="b" style="height:50px;"></div></div> <div class="a"> <div class="b" style="height:100px;"></div></div> <div class="a"> <div class="b" style="height:200px;"></div></div> <div class="a"> <div class="b" style="height:300px;"></div></div> <div class="a"> <div class="b" style="height:400px;"></div></div> <div class="a"> <div class="b" style="height:500px;"></div></div> </form> </body> </html> <script> $(".a").hover(function () { var s = $(this).children($(".b:first")).height();//animate:自定义动画 $(this).stop().animate({"height":(s+40)},500);//stop()：停止动画，防止动画积累 }, function () { $(this).stop().animate({ "height": "40px" }, 500); }); </script>