自定义滑入滑出动画

<%@ 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. VMware+Fedora20+secureCRT7.0配置心得

    VMware10 XX版 下载地址 secureCRT7 XX版 下载地址 做好安装等准备工作,打开Fedora虚拟机: 首先.安装openssh-server yum install openssh ...

  2. Cookie工具类

    import javax.servlet.http.Cookie; import javax.servlet.http.HttpServletRequest; import javax.servlet ...

  3. 使用ImageCreate()创建一个代表空白图像的变量

    在建立图像创建环境之前,还需要做一些准备工作.首先,安装t1lib接着安装jpeg-6b,然后再安装GD库文件.在安装时一定要按这里给定的顺序进行安装,因为在编译GD入库时会用到jpeg-6b,如果没 ...

  4. 【iCore3 双核心板_FPGA】例程十二：Modelsim仿真实验

    实验指导书及代码包下载: http://pan.baidu.com/s/1bnQEldl iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  5. AJAX原理及XMLHttpRequest对象分析

    今天的主题是前端都了解的AJAX,但其中都有哪些知识点,还需要深入分析. 首先揭示AJAX的字面意思,Asynchronous Javascript And XML,通俗点就是“异步Javascrip ...

  6. PHP文件操作系统----主要的文件操作函数

    一.文件操作系统概述 1.概述: php中的文件操作系统主要是对文件和目录的操作.文件在windows系统下分为3种不同:文件.目录.未知,在linux/unix系统下分为7种不同:block.cha ...

  7. SevenZip.pas BUG修改版 - 20160613

    原始版本: Henri Gourvest <hgourvest@gmail.com> 1.2版本 BUG修改: 1.对于文件名中带有空格的文件, 无法压缩, 原因是1488行, 压缩调用的 ...

  8. iOS cocospods Updating local specs repositories

    pod install --verbose --no-repo-update (在安装的时候) pod update --verbose --no-repo-update (在更新库的时候) 如果长时 ...

  9. 白话学习MVC(九)View的呈现一

    一.概述 本节来看一下ASP.NET MVC[View的呈现]的内容,View的呈现是在Action执行之后进行,Action的执行生成一个ActionResult,[View的呈现]的功能就是:通过 ...

  10. Spring mvc 下Ajax获取JSON对象问题 406错误

    我在学习springmvc过程中(我的项目是配置的后缀是.html),从controller返回对象. 如果我不使用 mvc-annotation-driver,而是手动配置,AnnotationMe ...