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> < ...
随机推荐
- 获取地址栏URL中参数, getQuerySting()方法
今天同事用的以前的获取url地址参数获取不到.以前的方法失效了.后面发现是正则表达式bug: 第一种获取方法(针对普通情况的一般够用): function getQueryString(name) { ...
- PAT甲级——A1037 Magic Coupon
The magic shop in Mars is offering some magic coupons. Each coupon has an integer N printed on it, m ...
- nodejs+express 初学（二）
开发首先要先选一个适合的IDE,经过上网查找最后还是决定用Webstorm,因为比较好用 1.我下载的版本是 2.然后就是新创建一个nodejs项目了 3.确定后就会在项目中生成新的项目,结构如下 目 ...
- 生成pb模型出错
raise self.ParseError('Expected identifier or number, got %s.' % result)google.protobuf.text_format. ...
- springcloud的服务提供者与服务消费者
1.说明 springcloud中由服务消费者调用服务提供者一共有两种方法rest和feign 2.feign (1)使用feign的方式进行服务调,搭建服务提供者. 创建一个web项目(服务提供者) ...
- Win7+AMD+VS2013+opencl1.x安装与测试
参考资料:http://www.cnblogs.com/lihao602/archive/2013/05/08/3067239.html: http://blog.csdn.net/zhoubo616 ...
- CF 549B Looksery Party
题面 解题思路 如果a数组全部>0,那么都不去即可.从这个角度出发,每次选出a[i]为0的,让它们去更新a数组,相当于拓补排序. 代码 #include<iostream> #inc ...
- Vue开发警告[Vue warn]: Avoid replacing instance root $data. Use nested data properties instead.
Avoid replacing instance root $data. Use nested data properties instead. 翻译 避免替换实例根$data.请改用嵌套数据属性 错 ...
- [转]深入理解ajax系列——响应编码
我们接收到的 ajax 响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示 XML文档的Document ...
- js数组操作方法
数组的操作方法在js中可谓是诸子百家,各种某乱的方法让人眼花缭乱,有时候就会分不清什么是自带的什么是曾今写的api了 数组的增删 1 . push() , pop() 和 shift() unshi ...