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的先决条件是:必须等待被请求页面的资源全 ...
随机推荐
- C# Socket SSL通讯笔记
一.x.509证书 1.制作证书 先进入到vs2005的命令行状态,即:开始-->程序-->Microsoft Visual Studio 2005-->Visual Studio ...
- [问题解决] locale::facet::_S_create_c_locale name not valid
错误: exception in initAndListen: 14043 clear tmp files caught exception exception: locale::facet::_S_ ...
- iOS开发之主题皮肤
iOS开发之主题皮肤 分类: [iOS] 最近在开发一款[公交应用],里面有个模块涉及到主题设置,这篇文章主要谈一下个人的做法. 大概的步骤如下: (1):整个应用依赖于一个主题管理器,主题管理器根 ...
- swift3.0 构造器、析构方法(3)
构造和析构是两种特殊的方法,在对象进行初始化的时候 使用构造,在对象的释放操作中,使用析构. 构造器的定义: init (){ //代码 } init(name:String){ //代码 } 在构造 ...
- css新属性box-sizing应用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 为什么没有好用的Android游戏引擎?
随着Android平台的不断发展,最近Android开发人员数量呈现出上升势头,就连以往较为冷门的游戏开发领域也涌现出不少生力军.然而,全新的问题正摆在了刚開始学习的人面前,非常多他们从未遇过的问题開 ...
- asp.net Listbox控件用法
2008-02-18 19:56 来源: 作者: ListBox(列表框)控件可以显示一组项目的列表,用户可以根据需要从中选择一个或多个选项.列表框可以为用户提供所有选项的列表.虽然也可设置列表框为多 ...
- Java String.indexOf() 函数用法小结
1. indexOf的参数是 String, startIndex: Number; indexOf的返回值为int, 2. Function indexOf 包含如下几个格式:1). Strng. ...
- 交换机access和trunk的一些小结(转)
以太网端口有 3种链路类型:access.trunk.hybird Access类型端口只能属于1个VLAN 般用于连接计算机 端口: Trunk类型端口可以允许多个VLAN通过,可以接收和发送多个 ...
- BZOJ 1935: [Shoi2007]Tree 园丁的烦恼( 差分 + 离散化 + 树状数组 )
假如矩阵范围小一点就可以直接用二维树状数组维护. 这道题, 差分答案, 然后一维排序, 另一维离散化然后树状数组维护就OK了. ----------------------------------- ...