自定义滑入滑出动画

<%@ 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. 科技来电：不容错过的win10轻度美化攻略

    作为微软不择手段采用弹框.限时.警告等方式强推win10的结果, win10市场占有率大增,微软高兴了,可用户苦了,吹洗剪+杀马特般的metro&传统混血开始菜单.鼻青脸肿般的任务栏.单一颜色 ...

  2. android之简单图形绘制

    首先编写MyView类 代码如下: package com.example.myhello; import android.content.Context; import android.graphi ...

  3. 测试的程序 test.php，保存放IIS的根目录下

    IIS+PHP的配置的方法,试过之后很多都不能达到效果.于是总结了大部分的文章后就得出了这样的方法 一.下载必须的程序:(1) 先到PHP的官方网站下载一个PHP(本文就以PHP 4.4.2为例).网 ...

  4. Javascript备忘模式

    使用备忘模式,利用了函数的自定义属性,先看一个例子 var test = function (){} test.myAttr = "attr"; 这样,就给test加上了一个自定义 ...

  5. 在 MVC4 中使用 Uploadify 3.2 - 1

    Uploadify 是 JQuery 一个著名的上传插件,利用 Flash 技术,Uploadify 越过浏览器的限制,控制了整个上传的处理过程,实现了客户端无刷新的文件上传,这样就实现了在客户端的上 ...

  6. Jquery 在页面加载后执行的几种方式

    1.$(function(){  $("#a").click(function(){  //adding your code here  }); }); 2.$(document) ...

  7. Linux搭建QT环境笔记

    *** [../../../../lib/libQtWebKit.so.4.7.4] Error 1make[1]: Leaving directory `/home/cloverbox/qt-eve ...

  8. Android 图文数据JSON解析

    数据格式为 {"sid":"737","tts":"http:\/\/news.iciba.com\/admin\/tts\/20 ...

  9. centos升级支持到C++11, gcc4.8.2

    升级到4.8[这个应该是目前最新的啦,不过网上查的话已经到5.2啦,感觉落后一点比较稳,当然还有就是这个版本是新的里面使用最多的] wget http://people.centos.org/tru/ ...

  10. iOS 1-2年经验面试参考题

    Model层: 数据持久化存储方案有哪些? 沙盒的目录结构是怎样的?各自一般用于什么场合? SQL语句问题:inner join.left join.right join的区别是什么? SQLite的 ...