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的先决条件是:必须等待被请求页面的资源全 ...
随机推荐
- JavaScript和php常用语法——切割字符串
在面向Web的应用中,前台和后台通信非常常用的一种格式就是字符串,所以,在通信中,我们不可避免的就需要进行字符串的拼切. 在js代码中,当我们传递一个字符串到后台代码时,我们在后台需要对字符串进行切割 ...
- Android应用中使用自定义文字
在Android系统中可以很方便的修改字体样式.系统提供了三种样式,分别是sans,serif,monospace.可以在xml布局文件中通过 android:typeface="[sans ...
- 如何評鑑一家SMT代工廠
我們一般稱專業的「電子代工廠」為 EMS(Electronics Manufacturing Service,電子製造服務業) 或 CM(Contract Manufacturer,合同製造廠),這些 ...
- linux下各种代理的设置
http://los-vmm.sc.intel.com/wiki/OpenStack_New_Hire_Guide#Apply_JIRA_account Set up your proxy. The ...
- NSFileHandle编写json数据格式
代码如下: + (void)writeToFile:(NSDictionary *)params filePath:(NSString *)path { NSData *jsonData = [sel ...
- DBCP|C3P0参数详解
1.<!-- 数据源1 --> 2. <bean id="dataSource" 3. class="org.apache.commons.dbcp.B ...
- MyDatePicker拆分日期显示到不同TextBox
如图所示效果:年—月—日 时—分—秒 <tr> <td align="center" style="background- ...
- web - float , 浮动
浮动 : 使元素脱离文档流,按照指定的方向发生移动,遇到父级边界或者相邻的浮动元素则停下来: 元素被设置浮动属性后,呈现的特征有: 1.多个块可以在一行显示 2.内联元素支持狂傲 3.默认宽度由内容撑 ...
- 使用JDom解析XML文档模拟Spring的配置文件解析
在J2EE项目中可能会涉及到一些框架的使用,最近接触到了SSH,拿Spring来说配置文件的使用是相当重要的,Spring的配置文件是一个xml文件,Spring是如何读取到配置文件并进行依赖注入的呢 ...
- BZOJ 4311: 向量( 按时间分治 + 线段树 )
离线, 然后按时间分治, 每个向量都有出现时间[l, r], 直接插入时间线段树(一个向量只会影响O(logN)数量级的线段树节点). 在线段树每个节点弄出凸壳然后二分. 时间复杂度O(Nlog^2N ...