<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. MVC4,MVC3,VS2012+ entity framework Migration from Sqlserver to Mysql

    在开发的初期个人认为因VS与Sqlserver的配合很默契,即可以方便的实现Code First,又可以使用SqlServer Manager很漂亮的进行建模与变更,也许是个人的使用习惯MS的界面做的 ...

  2. SQL Server 一些重要视图4

    sys.master_files 为每一个数据库的每一个文件返回行.

  3. Oracle中强行断开用户连接的方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 首先查找目标用户的当前进程,注意是serial#而不是serial,网上有的介绍漏掉了#: select sid,serial# from v$s ...

  4. Oracle EBS-SQL (BOM-6):检查物料失效但BOM中未失效的数据.sql

    select msi.segment1                   装配件编码 , msi.description                  装配件描述 , msi.item_type ...

  5. 接收时物料必须为Active状态

    应用 Oracle Inventory 层 Level Function 函数名 Funcgtion Name RCV_RCVRCERC 表单名 Form Name RCVRCERC 说明 Descr ...

  6. poj 3273 Monthly Expense (二分搜索,最小化最大值)

    题目:http://poj.org/problem?id=3273 思路:通过定义一个函数bool can(int mid):=划分后最大段和小于等于mid(即划分后所有段和都小于等于mid) 这样我 ...

  7. 基于注解的EF

    首先得你的ef dll版本在4.1以上 第一步贴第一个类 由于字段太多就写一部分  [Table("NavF")]//设置表名称     public class NavF     ...

  8. C++ ofstream和ifstream

    ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间; 在C++中,有一个stream这个类,所有的I/O都以这个“流”类为基础的,包括我们要认识的文件I/O, ...

  9. html基础标签-1-pre预格式标签

    pre预格式标签 code,tt标签 1 <!doctype html> 2 <html lang='zh-cn'> 3 <head> 4 <meta cha ...

  10. BroadcastReceiver自学笔记

    1. 使用步骤:  1.1 声明Intent Intent intent = new Intent("name");------静态常用 IntentFilter filter = ...