<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. Core开发-MVC 使用dotnet 命令创建Controller和View

    NET Core开发-MVC 使用dotnet 命令创建Controller和View   使用dotnet 命令在ASP.NET Core MVC 中创建Controller和View,之前讲解过使 ...

  2. Delphi OleVariant 类型的用法

    因客户需求,对客户的指纹机与公司产品进行集成,需要对指纹机做接口的二次开发,郁闷的是产商只提供了VB和C的DEMO示例,没有Delphi的,公司没有VB,C的环境,不能打开这二种语言的示例,因为本公司 ...

  3. openNebula 运维系列虚拟机virtual machines operations

    1,virtual machine manage,VMInstance state; http://docs.opennebula.org/4.4/user/virtual_resource_mana ...

  4. javascript关键字加亮加连接

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

  5. python socket理论知识

    一.socket理论: 发现一个很好的文章,一个高手写的,我也就不再做搬运工了,直接连接吧,对理论感兴趣的可以去看看! http://www.cnblogs.com/dolphinX/p/346054 ...

  6. 兔子--Android中的五大布局

    LinearLayout:被称为线性布局,分为水平和垂直,设置的垂直或水平的属性值,来排列全部的子元素.全部的子元素都被堆放在其他元素之后,因此一个垂直列表的每一行仅仅会有一个元素,而无论他们有多宽, ...

  7. xcode UIButton创建、监听按钮点击、自定义按钮 、状态 、内边距

    代码创建 //创建UIButton UIButton * btnType=[[UIButton alloc]init]; //设置UIControlStateNormal状态下的文字颜色 [btnTy ...

  8. 笔记-AndroidStudio开发环境的搭建

    首先当然是下载AndroidStudio,目前最新的稳定版是1.1 然后下载studio版本的sdk,如果用原装sdk,需要更新   安装的过程中会选择sdk的路径,此时如果已经解压了原装sdk,会进 ...

  9. BZOJ 1037: [ZJOI2008]生日聚会Party( dp )

    dp(i, j, a, b)表示选了i个男生, j个女生, 后缀中男生比女生多a(最多), 女生比男生多b(最多). dp(i+1, j, a+1, max(0, b-1)) += dp(i, j, ...

  10. 关于 android Intent 传对象和对象数组的一些操作

    直接开正题,Intent传递值就是平常那些很简单的,接下来介绍传递 对象,和 对象数组 1 .intent 传递自定义的 对象 - 实体类继承  Serializable public class A ...