自定义滑入滑出动画

<%@ 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. 怎么配置Java环境变量？

    右键计算机 -> 属性 -> 高级系统设置 -> 环境变量,   在系统环境变量添加以下三条变量. 1. PATH, 配置JDK命令文件的位置. 输入“%JAVA_HOME%\bin ...

  2. 歐洲國家拓展其移動和IT服務業務

    中興德國子公司與JOIN簽訂了一項綜合託管服務合同,在該合同中,公司將全面負責為盧森堡和比利時的JOIN核心網路提供網路運營,點對點無線網路報告,新品發佈和維護,還負責故障檢查.維修.測試和軟體升級. ...

  3. 【代码升级】【iCore3 双核心板】例程二十八：FSMC实验——读写FPGA

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

  4. Yii源码阅读笔记（二十六）

    Application 类中设置路径的方法和调用ServiceLocator(服务定位器)加载运行时的组件的方法注释: /** * Handles the specified request. * 处 ...

  5. 一键发布ASP.NET Web安装程序

    转载自:http://www.cnblogs.com/nangong/p/Web.html        前言:最近公司有个Web要发布,但是以前都是由实施到甲方去发布,配置,这几天有点闲,同事让我搞 ...

  6. BFC以及文档流

    在一个文档流中,盒子模型元素的位置会互相影响. 当一个BFC出现在文档流中时,BFC内部的盒子模型元素同BFC外部的元素之间的位置不会互相影响. 相当于BFC重新创建了一个文档流. 举例: 一个文档流 ...

  7. js-方法

    最近觉得自己的基础貌似太薄弱了,找了几本电子书,整理了一下基础的 方法: Concat:返回一个新数组 var a=['a','b','c']; var b=['x','y','z']; var c= ...

  8. [译]SpringMVC自定义验证注解(SpringMVC custom validation annotations)

    在基于SpringMVC框架的开发中,我们经常要对用户提交的字段进行合法性验证,比如整数类型的字段有个范围约束,我们会用@Range(min=1, max=4).在实际应用开发中,我们经常碰到一些自己 ...

  9. django使用gmail

    POSTED ON 02 JUL 2007 IN DEVELOPMENT DJANGO PYTHON WEBDid a bit of running around today to get Djang ...

  10. eclipse中配置tomcat

    配置eclipse中的tomcat非常简单,之前以为windows下和mac中可能会不一样,但是经过配置发现是一样的: 下面就是在eclipse中简单的配置tomcat如下(mac和windows中都 ...