jquery简单动画

 

 

自定义滑入滑出动画

<%@ 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;
        width:100px;
        height:40px;
        background-color:darkblue;
        overflow:hidden;
        margin-left:20px;
        }
        .b {
        width: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>
View Code

 

posted @ 2016-11-17 20:32  冲天小肥牛  阅读(143)  评论(0)  编辑  收藏  举报