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> < ...
随机推荐
- There is no public key available for the following key IDs:3B4FE6ACC0B21F32
ubuntu 运行完sudo apt-get update之后,提示 W: There is no public key available for the following key IDs: 3B ...
- pin, port, cell, net
一幅图即可解释清楚: 更标准的官方解释:
- JZOJ[5971]【北大2019冬令营模拟12.1】 party(1s,256MB)
题目 题目大意 给你一棵树,在树上的某一些节点上面有人,要用最小的步数和,使得这些人靠在一起.所谓靠在一起,即是任意两个人之间的路径上没有空的节点(也就是连在一起). N≤200N \leq 200N ...
- 廖雪峰Java10加密与安全-5签名算法-1RSA签名算法
1.数字签名 甲在发送加密消息的时候,还要发送自己的签名,而这个签名是用甲的privateKey计算的:而乙要验证这个签名是否是合法的,会用甲的publicKey去验证,如果验证成功,这个消息确实是甲 ...
- vue 学习 二
动画 <transition name="fade"> <p v-if="show">hello</p> </tran ...
- 在 Angularjs 中$state.go 如何传递参数
在目标页面规定接受的参数: .state('app.AttendanceEditFixed', { url: '/AttendanceEditFixed', params: {'id': null,' ...
- [转]C#截获本机数据包方法实例
本文向大家介绍Windows Sockets的一些关于用C#实现的原始套接字(Raw Socket)的编程,以及在此基础上实现的网络封包监视技术.同Winsock1相比,Winsock2最明显的就是支 ...
- vue 权限管理
核心想法: 登陆后获得用户角色,通过角色获得用户的权限,注入权限对应的路由.刷新页面,从localStorage用角色(更好的方式是通过token)再次获得所属权限,再次注入路由.在管理界面左端循环权 ...
- Dockerfile 编写
转: https://blog.fundebug.com/2017/05/15/write-excellent-dockerfile/如何编写最佳的Dockerfile 译者按: Dockerfile ...
- 码云及git使用
首次使用码云,将本地文件与之关联(创建仓库之后的页面截图) git -- 版本控制(协同开发软件) git add . # 将当前文件下所有内容添加到临时缓存区 git commit -m " ...