自定义滑入滑出动画

<%@ 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. javascript对象的一点理解

    <script type="text/javascript"> /* js对象:对象的职责是调用属性和调用方法 */ //1.对象的创建的三种方式 var obj = ...

  2. windows内核 内存管理

    一.几个基本的概念 1.存储器的金字塔结构 存储器从下之上依次是磁盘/flash.DRAM(内存).L2-cache.L1-cache.寄存器,越在上面的存储器访问速度越快,同时价格也越昂贵,每一级都 ...

  3. Js表单Submit问题

    一般在submit前,会用js查核是否满足提交标准,如下: function doSubmit(){ if(doucument.getElementbyId("myID") ==& ...

  4. python中的Queue

    一.先说说Queue(队列对象) Queue是python中的标准库,可以直接import 引用,之前学习的时候有听过著名的“先吃先拉”与“后吃先吐”,其实就是这里说的队列,队列的构造的时候可以定义它 ...

  5. Oracle-01033错误处理

    今天电脑非常卡,强制重启后,发现oracle 11g启动不了了,提示错误: ERROR - ORA-01033 oracle initialization or shutdown in progres ...

  6. 前端文摘：Web 开发模式演变历史和趋势

    今天的<前端文摘>给大家分享一篇玉伯的文章.文章详细介绍了 Web 开发的四种常用模式以及未来可能成为流行趋势的 Node 全栈开发模式,相信你看了以后一定会有收获. 您可能感兴趣的相关文 ...

  7. php array_udiff_uassoc比较数组的键值与值

    php array_udiff_uassoc 用于带索引检查计算数组的差集,用回调函数比较数据和索引.本文章通过实例向大家介绍array_udiff_uassoc函数的使用方法.需要的码农可以参考一下 ...

  8. JMeter学习-002-JMeter环境配置

    本节主要介绍 JMeter 本地环境配置(JMeter 版本为 apache-jmeter-2.12),详细配置如下: 一.JDK配置 默认用户本地已经安装且配置好 JDK.若未配置,敬请参阅我的博客 ...

  9. Microsoft ACE OLEDB 12.0概念及用法

    首先需要清楚几个概念: Database engine(数据引擎):一些预先存储于数据库中的组件: Microsoft JET (Joint Engine Technology):Microsoft ...

  10. IIS6(Win2003) 使用.net 4.0 后，默认文档失效解决方案。

    IIS6(Win2003) 使用.net framework 4.0 后,默认文档失效解决方案. 用.net framework 4.0 开发的WEB项目,但放到iis6 中无法使用默认文档,状况如下 ...