<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. 不同的strcmp

    Android libc中的strcmp https://android.googlesource.com/platform/bootable/bootloader/legacy/+/donut-re ...

  2. 自写的LastPos,寻找字符串里的最后一个字符,RTL里没有提供这个函数——Delphi的String下标是从1开始的

    已经好几次了,没有这个函数还是感觉很不方便,所以自己写了一个: function LastPos(strFind :string; ch: Char): integer; var i, n: inte ...

  3. 跟我一起学ruby (转)

    跟我一起学ruby By Tiger 注:本教程转载自在游戏先行者论坛,版权属于作者Tiger. 第一篇 第二篇 第一篇 自序 从今天起我就要开始学Ruby了.怎么样,没见吧?一个新人写教程.就凭我坚 ...

  4. flash跨域策略文件crossdomain.xml

    flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据. 位于www.a.com域中的SWF文件要访问www. ...

  5. android上下文

    在android中常常会遇到与context有关的内容 浅论一下context : 在语句 AlertDialog.Builder builder = new AlertDialog.Builder( ...

  6. xcode UIImageView创建、图片加载、 音频文件播放、 延迟调用

    代码创建 /** 创建UIImageView */ UIImageView * imageView=[[UIImageView alloc]init]; /** 设置尺寸位置 */ imageView ...

  7. 设计模式- 主动对象(Active Object)

    译者注:1.对象分为主动对象和被动对象,主动对象内部包含一个线程,可以自动完成动作或改变状态,而一般的被动对象只能通过被其他对象调用才有所作为.在多线程程序中,经常把一个线程封装到主动对象里面.2.在 ...

  8. PS学习

    PS快捷键大全(转自UI中国PS教程) 摆脱鼠标流就靠这张图了!!!! 查看图像 使用导航器查看图像 选择窗口-->导航器 菜单命令 使用缩放工具查看图像 ctrl++ 以画布大小放大图像 ct ...

  9. SSH框架的简化

    ---恢复内容开始--- 一.简易化的SSH框架,如图: SSH框架的搭建,我就不多说了. 二.简易的ssh框架的步骤: 1.重新编写applicationContext.xmlwen文件 <一 ...

  10. BZOJ 3170: [Tjoi 2013]松鼠聚会( sort )

    题目的距离为max(|x1-x2|, |y1-y2|) (切比雪夫距离). 切比雪夫距离(x, y)->曼哈顿距离((x+y)/2, (x-y)/2) (曼哈顿(x, y)->切比雪夫(x ...