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的先决条件是:必须等待被请求页面的资源全 ...
随机推荐
- 获取考试成绩的sql语句
as score,t_answer.id,t_answer.exams_name,t_answers.answer_id,t_answers.questions_id,t_answers.questi ...
- Nanjing GDG Meetup 8月线下活动
致各位亲爱的 Google 技术爱好者 很高兴的通知各位朋友,Nanjing GDG 将在本周六 (08/31) 举办线下活动,讨论 Android 开发实战技巧,热烈欢迎大家报名参加. 时间: 8 ...
- S3C6410嵌入式应用平台构建(五)——linux-3.14.4移植到OK6410-(Nand分区问题)
前一篇文章,我们的Linux能后启动了,只是在识别nand时候,没有获取到时钟源,导致后面的分区没哟进行. 我们从启动的log发现: [06/08-11:25:41:371]s3c24xx-nand ...
- Alisha’s Party(队列)
Alisha’s Party Time Limit: 3000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) ...
- 2014 Web开发趋势
本文翻译自:http://www.pixelstech.net/article/1401629232-Web-design-trends-for-2014 如今,已然到了Web横行的时代.越来越多的资 ...
- paip.c++ qt messagebox用法
paip.c++ qt messagebox用法 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net ...
- 安卓activity捕获返回button关闭应用的方法
安卓activity捕获返回button关闭应用的方法 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { //按下键盘 ...
- c#学习已经停止了
为了养家糊口,没有时间学习c#.
- JavaScript之JS的执行环境和作用域
一.执行环境是JavaScript中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行为,每个执行环境都有一个与之关联的变量对象(variable object),环境 ...
- 转载:SQL语句Where中使用别名作为判断条件
原文地址:http://www.cnblogs.com/dwfbenben/p/3307941.html 当我们使用某个表达式作为输出的一列时,我们无法再Where条件中直接使用该列作判断条件. ...