Jquery简单动画的实现记录
<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简单动画的实现记录的更多相关文章
- jquery简单动画
自定义滑入滑出动画 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul ...
- jquery简单笔记(1) - 基础记录
一.dom对象及jquery对象相互转换 jquery对象转换成dom对象,即 [index] 和 get(index) 第一种方式: var $j = $('#id'); // jquery对象 v ...
- JQuery简单动画效果的发生顺序和animate方法
(1)在同一组元素上的效果 当在一个.animate()方法中以多个属性的方式应用时,是同时发生的. 当以方法连缀的形式应用时,是按顺序发生的(排队效果)---除非queue选项值为false. (2 ...
- jquery添加光棒效果的各种方式以及简单动画复杂动画
过滤器.绑定事件.动画 一.基本过滤器 语法 描述 返回值 :first 选取第一个元素 单个元素 :last 选取最后一个元素 单个元素 :not(selector) 选取去除所有与给定选择器匹 ...
- HTML5/jQuery雷达动画图表 图表配置十分简单
1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...
- JQuery 基本使用、操作样式、简单动画
JQ与JS JQ是JS写的插件库,就是一个JS文件 凡是用JQ能实现的,JS都能实现,JS能实现的,JQ不一定能实现 引入 BootCDN:https://www.bootcdn.cn/jquery/ ...
- jQuery中自定义简单动画的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- jQuery的动画处理总结
最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...
- jQuery简单入门(三)
3.事件和动画 A. 事件 Aa. DOM加载 1.为什么使用jQuery加载DOM方法? 以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全 ...
随机推荐
- Core开发-MVC 使用dotnet 命令创建Controller和View
NET Core开发-MVC 使用dotnet 命令创建Controller和View 使用dotnet 命令在ASP.NET Core MVC 中创建Controller和View,之前讲解过使 ...
- Delphi OleVariant 类型的用法
因客户需求,对客户的指纹机与公司产品进行集成,需要对指纹机做接口的二次开发,郁闷的是产商只提供了VB和C的DEMO示例,没有Delphi的,公司没有VB,C的环境,不能打开这二种语言的示例,因为本公司 ...
- openNebula 运维系列虚拟机virtual machines operations
1,virtual machine manage,VMInstance state; http://docs.opennebula.org/4.4/user/virtual_resource_mana ...
- javascript关键字加亮加连接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/str ...
- python socket理论知识
一.socket理论: 发现一个很好的文章,一个高手写的,我也就不再做搬运工了,直接连接吧,对理论感兴趣的可以去看看! http://www.cnblogs.com/dolphinX/p/346054 ...
- 兔子--Android中的五大布局
LinearLayout:被称为线性布局,分为水平和垂直,设置的垂直或水平的属性值,来排列全部的子元素.全部的子元素都被堆放在其他元素之后,因此一个垂直列表的每一行仅仅会有一个元素,而无论他们有多宽, ...
- xcode UIButton创建、监听按钮点击、自定义按钮 、状态 、内边距
代码创建 //创建UIButton UIButton * btnType=[[UIButton alloc]init]; //设置UIControlStateNormal状态下的文字颜色 [btnTy ...
- 笔记-AndroidStudio开发环境的搭建
首先当然是下载AndroidStudio,目前最新的稳定版是1.1 然后下载studio版本的sdk,如果用原装sdk,需要更新 安装的过程中会选择sdk的路径,此时如果已经解压了原装sdk,会进 ...
- 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, ...
- 关于 android Intent 传对象和对象数组的一些操作
直接开正题,Intent传递值就是平常那些很简单的,接下来介绍传递 对象,和 对象数组 1 .intent 传递自定义的 对象 - 实体类继承 Serializable public class A ...