<div style="background:#98bf21;height:100px;width:100px;">

//从元素当前所在位置,往下消失
$(document).ready(function(){
$("button").click(function(){
$("div").css('position','absolute');
$("div").css('top',$("div").position().top);
$("div").animate({
top:'100%',
opacity:'0.5',
width:'150px',
height:'0px',
});
});
});
<textarea></textarea>

//textarea选中时变高20px,离开时变回去
<script>
$(document).ready(function(){
$("textarea").focus(function(){
$("textarea").animate(
{height:'+=20px'}
);
});
$("textarea").blur(function(){
$("textarea").animate(
{height:'-=20px'}
);
});
});
</script>

Jquery简单动画的实现记录的更多相关文章

  1. jquery简单动画

    自定义滑入滑出动画 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul ...

  2. jquery简单笔记(1) - 基础记录

    一.dom对象及jquery对象相互转换 jquery对象转换成dom对象,即 [index] 和 get(index) 第一种方式: var $j = $('#id'); // jquery对象 v ...

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

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

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

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

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

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

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

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

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

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

  8. jQuery的动画处理总结

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

  9. jQuery简单入门(三)

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

随机推荐

  1. SQL Server 查看一个表上的索引

    方法:1 sys.indexes index_id =0:堆 index_id =1:聚集索引 index_id =2.....:非聚集索引 ----------------------------- ...

  2. 《转》JAVA中PriorityQueue优先级队列使用方法

    该文章转自:http://blog.csdn.net/hiphopmattshi/article/details/7334487 优先级队列是不同于先进先出队列的另一种队列.每次从队列中取出的是具有最 ...

  3. Oracle EBS-SQL (SYS-1): sysadmin_用户职责查询.sql

    select fu.user_name 用户名, fu.description 用户说明, frv.RESPONSIBILITY_NAME 职责名称, REQUEST_GROUP_NAME 报表组, ...

  4. 用“U盘”重新安装(MSDN)原版Windows XP sp3操作系统(图文)

    安装微软(MSDN)原版Windows XP sp3系统的方法不少,可以说是很多,但是我就用“U盘”安装.用“U盘”装XP系统也不是什么稀罕事,不会的,就按照下面我常用的“U盘”装原版Windows ...

  5. 透明窗口(窗口上面文字图片等内容不透明)的实现(使用SetLayeredWindowAttributes API函数)

    透明窗口(窗口上面文字图片等内容不透明)的实现 本文讨论通过SetLayeredWindowAttributes来实现本文的目的. SetLayeredWindowAttributes的实现必须将窗口 ...

  6. QWebView 显示本地HTML 文件

    QWebView 显示本地HTML文件的时候,如果直接使用 webView->load(QUrl(QString("file:///c:\\a.html")); 可能会导致a ...

  7. [原]容器学习(二):动手模拟AOP

    简单来说,Spring是一个轻量级的控制反转(IOC)和面向切面(AOP)的容器框架.上文已经介绍模拟IoC实现,这篇文章来动手模拟AOP. AOP简述 面向对象强调"一切皆是对象" ...

  8. hdu--1800--字典树&&其他

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1800 根据题意可知:意思是有若干个飞行员,需要在扫帚上练习飞行,每个飞行员具有不同的等级,且等级高的飞 ...

  9. bootstrap栅格系统的div高度怎样定?

    不能直接写px,不同设置分辨不同,div宽度始终是满屏的,如果高度指定像素大小,div就不能保证长宽比例恰当了. 解决方法: height:0px;padding-bottom:100%

  10. C#DataTable DataSet DataRow区别详解

    DataSet 是C#中用来存储数据库数据的.其实,它的作用是在内存中模拟数据库.我们现实生活中的数据库从大到小的基本结构类似于:数据库实例,表,列,行.在C#语言中,我们在内存中也模拟出了一个这样的 ...