自定义滑入滑出动画

<%@ 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+)},);//stop()：停止动画，防止动画积累

    }, function () {

        $(this).stop().animate({ "height": "40px" }, );

    });

</script>

jquery简单动画的更多相关文章

  1. JQuery简单动画效果的发生顺序和animate方法

    (1)在同一组元素上的效果 当在一个.animate()方法中以多个属性的方式应用时,是同时发生的. 当以方法连缀的形式应用时,是按顺序发生的(排队效果)---除非queue选项值为false. (2 ...

  2. Jquery简单动画的实现记录

    <div style="background:#98bf21;height:100px;width:100px;"> //从元素当前所在位置,往下消失 $(docume ...

  3. jquery添加光棒效果的各种方式以及简单动画复杂动画

    过滤器.绑定事件.动画   一.基本过滤器 语法 描述 返回值 :first 选取第一个元素 单个元素 :last 选取最后一个元素 单个元素 :not(selector) 选取去除所有与给定选择器匹 ...

  4. HTML5/jQuery雷达动画图表 图表配置十分简单

    1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...

  5. JQuery 基本使用、操作样式、简单动画

    JQ与JS JQ是JS写的插件库,就是一个JS文件 凡是用JQ能实现的,JS都能实现,JS能实现的,JQ不一定能实现 引入 BootCDN:https://www.bootcdn.cn/jquery/ ...

  6. jQuery中自定义简单动画的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  8. jQuery简单入门(三)

    3.事件和动画 A. 事件 Aa. DOM加载 1.为什么使用jQuery加载DOM方法? 以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全 ...

  9. jQuery简单实例

    jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...

随机推荐

  1. Oracle10g RAC的简单操作

    1.查看OCR位置用户指定的位置会被放置在 /etc/oracle/ocr.loc(Liunx系统) 或 /var/opt/oracle/ocr.loc [oracle@rac4 opt]$ cat ...

  2. JavaScript 几种简单的table切换

    方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> < ...

  3. 安装SSD固态硬盘

    满足三个要求:开启AHCI."4K对齐".SSD初始化. 1. 开启AHCI模式 重启,进入bios,高级模式,SATA模式选择,选择AHCI. 2. 4K对齐 第3步,在分区的时 ...

  4. ThinkPHP 3.2.3 多模块 和 多应用 的配置

    多模块 在 ThinkPHP 3.2.3 中,默认的应用目录是 ./Application,下面的默认模块是 Home 模块,如果此时需要添加一个 Admin 模块用于后台应用,根据手册 http:/ ...

  5. mac svn 更新到新版本1.8

    1.执行:brew install scons 如果没装brew,先装它.安装命令如下:curl -LsSf http://github.com/mxcl/homebrew/tarball/maste ...

  6. JavaScript 字符 &quot;转换

    后台把一个Json类型的数据当成字符串返回到前台,但是到前台变成了下面的这个样子 "[{"name":"IE","y":72},{ ...

  7. 【C++】int、const char*、char*、char、string之间的转换

    #include "stdafx.h" #include<string> #include<vector> #include<iostream> ...

  8. SSD果然劲爆！

    前两周入手了一块浦科特128G盘,不说多了,有图为证 以前把机械盘放在主硬盘位的时候,鲁大师显示是SATA II接口,现在把SSD放在主硬盘位,显示居然是SATA III接口了,看上面测试,确实是II ...

  9. php判断闰年

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. （转）PHP常用函数

    来源  :http://www.cnblogs.com/dreamhome/archive/2011/05/04/2037011.html ---------------------------- & ...