JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画
/**
* 【JQ基础动画】
* show() 显示
* hide() 隐藏
* toggle() 切换
* 默认无动画，如果要产生动画
* 在括号内，添加毫秒数，可产生动画和控制动画的快慢
*
* 《滑动动画》
* slideDown() 滑动显示(下)
* slideUp() 滑动隐藏(上)
* slideToggle 滑动切换
* 默认有动画，默认是400毫秒
* 《淡入淡出动画》
* fadeIn() 淡入显示
* fadeOut() 淡出显示
* fadeToggle() 切淡
* fadeTo(时间,透明度) 设置透明度
*/
一.基础动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
$('button:eq(0)').click(function () {
$('img').show(1000);
}); $('button:eq(1)').click(function () {
$('img').hide(1000);
}); $('button:eq(2)').click(function () {
$('img').toggle(1000);
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button><br/>
<img src="data:images/1.gif" alt="">
</body>
</html>
二.滑动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 400px;
background-color: pink;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
$('button').eq(0).click(function () {
$('.box').slideDown();
});
$('button').eq(1).click(function () {
$('.box').slideUp();
});
$('button').eq(2).click(function () {
$('.box').slideToggle();
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<br>
<!--<img src="data:images/1.gif" alt="" width="150" height="440">-->
<div class="box"></div>
</body>
</html>
三.淡入淡出动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 400px;
background-color: pink;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
$('button').eq(0).click(function () {
$('.box').fadeIn();
});
$('button').eq(1).click(function () {
$('.box').fadeOut();
});
$('button').eq(2).click(function () {
$('.box').fadeToggle(1000);
});
$('button').eq(3).click(function () {
$('.box').fadeTo(400,0.3);
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<button>透明度</button>
<br>
<!--<img src="data:images/1.gif" alt="" width="150" height="440">-->
<div class="box"></div>
</body>
</html>
四.自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main{
width: 100px;
height: 100px;
background-color: pink;
/*transition: all .4s;*/
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
/**
* 自定义动画(兼容IE678.)
* 其实JQ的动画也可以通过CSS3实现，但是CSS3会有兼容问题
* 移动端项目的时候，直接使用CSS3实现效果即可
* PC端要考虑低版本浏览器兼容，可以使用JQ的animate函数
*
* 有动画的属性：
* 值是数字的属性：（颜色，文本居中这些就实现不了）
* 核心函数
* .animate({属性集合})
*
* */ //（颜色，文本居中这些就实现不了动画）
$('button').click(function () {
$('.main').animate({
"width":"300px",
"height":"300px",
"backgroundColor":"#f90",
"textAlign":"center",
"lineHeight":"300px"
},300);
});
});
</script>
</head>
<body>
<button>动起来</button>
<div class="main">
文字行号
</div>
</body>
</html>
JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画的更多相关文章
- JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
- jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...
- js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么
js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...
- 用POP动画编写带富文本的自定义动画效果
用POP动画编写带富文本的自定义动画效果 [源码] https://github.com/YouXianMing/UI-Component-Collection [效果] [特点] * 支持富文本 * ...
- ListView的淡入淡出和Activity的淡入淡出补间动画效果Animation
//=========主页面======================= package com.bw.lianxi7; import android.os.Bundle;import androi ...
- IOS启动页动画（uiview 淡入淡出效果 )2
Appdelegate里面右个这个函数,只要它没结束,你的等待界面就不会消失.以在启动的时候做些动画 - (BOOL)application:(UIApplication *)application ...
- jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...
- iTween基础之CameraFade(摄像机淡入淡出)
一.基础介绍:二.基础属性 原文地址: http://blog.csdn.net/dingkun520wy/article/details/50896420 一.基础介绍 CameraTexture: ...
- 【Flutter 实战】17篇动画系列文章带你走进自定义动画
老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念 在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义 ...
- JQuery显示，隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...
随机推荐
- 在sqlserver 的函数或存储过程中抛出异常（raiserror ）
raiserror的作用: raiserror 是用于抛出一个错误 其语法如下: RAISERROR ( { msg_id | msg_str | @local_variable } { ,sev ...
- Multi-statement transaction required more than 'max_binlog_cache_size' bytes of storage; increase this mysqld variable and try again
WARN: SQL Error: , SQLState: HY000 八月 , :: 下午 org.hibernate.engine.jdbc.spi.SqlExceptionHelper logEx ...
- Python基础---三大推导式
推导式comprehensions(又称解析式),是Python的一种独有特性.推导式是可以从一个数据结构构建另一个新的数据结构的结构体. 共有三种推导,在Python2和3中都有支持: 列表(lis ...
- Python爬虫笔记【一】模拟用户访问之表单处理（3）
学习的课本为<python网络数据采集>,大部分代码来此此书. 大多数网页表单都是由一些HTML 字段.一个提交按钮.一个在表单处理完之后跳转的“执行结果”(表单属性action 的值)页 ...
- sqoop import 和export的问题
sqoop import DB 2 hive(hdfs)是采用JDBC的过程,与传统hive区别在与多走了thrift server接口(稳定性待学习现在还比较模糊没做过大数据量测试),而export ...
- vim编辑器操作①
Linux文本编辑器: 行编辑器:sed 全屏编辑器:nano,vi/vim 本文主要介绍说明vim编辑器的相关使用: 其有三种模式,即: 编辑模式(默认模式).插入模式(输入模式).末行模式(内置的 ...
- Redis源码解析：20sentinel(一)初始化、建链
sentinel(哨兵)是redis的高可用解决方案.由一个或多个sentinel实例组成的分布式系统,可以监控任意多个主节点,以及它们属下的所有从节点.当某个主节点下线时,sentinel可以将下线 ...
- Redis源码解析：14Redis服务器与客户端间的交互
Redis服务器是典型的一对多服务器程序,通过使用由IO多路复用技术实现的文件事件处理器,Redis服务器使用单线程单进程的方式来处理命令请求,并与多个客户端进行网络通信. Redis客户端与服务器之 ...
- 2019阿里云开年Hi购季必抢！爆爆爆爆爆爆爆款清单来了！
摘要: 鸡冻人心的三月开年Hi购季来了,根本不知道该买哪款?这次就给大家列一波口碑爆款! 鸡冻人心的三月开年Hi购季来了 个个摩拳擦掌 为了算清楚能省多少钱 颓废多年的数学水平 仿佛在这个节日回到了高 ...
- Django项目：CRM(客户关系管理系统)--49--40PerfectCRM实现全局账号注册+验证码+页面刷新保留信息
# gbacc_urls.py # ————————38PerfectCRM实现全局账号登录注销———————— from django.conf.urls import url from gbacc ...