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> < ...
随机推荐
- rabbitmq类
1.accept.php消费者代码需要在命令行执行 2.'username'=>'asdf','password'=>'123456' 改成自己的帐号和密码 RabbitMQCommand ...
- ERP或PLM系统-物料编码管理的技术实现
1 企业现状 企业日常经营过程中会产生大量的文档,如设计图纸.变更单.计算书.设计方案等,如果是制造企业还会产生大量的产品.组成产品的零部件等物料,这些数据在进入信息系统前都需要有一个唯一的标识,也就 ...
- java虚拟机(十三)--GC调优思路
GC调优对我们开发人员来说,如果你想要技术方面一直发展下去,这部分内容的了解是必不可少的,jvm对于工作.面试来说都很重要,GC调优的问题 更是重中之重,因为是对你jvm学习内容的实践,知识只有应用实 ...
- 阿里云“网红"运维工程师白金：做一个平凡的圆梦人
他是阿里云的一位 P8 运维专家,却很有野心得给自己取花名“辟拾(P10)”:他没有华丽的履历,仅凭着 26 年的热爱与坚持,一步一个脚印踏出了属于自己的技术逆袭之路:他爱好清奇,练就了能在 20 秒 ...
- [转]Sql Server Alter语句
原文链接:http://www.cnblogs.com/yoolonet/archive/2010/12/10/1884782.html 在修改Sql Server表结构时,常用到Alter语句,把一 ...
- Win3.2有人用过么
老牌子的操作系统. 了,有人用过么,我还在用,感觉挺不错的,哈哈哈哈哈. 1.0那一代,画面粗糙,几乎不能算GUI操作系统. 2.0,画面较1.0一代明显改善,可惜的是,手头没货. 3.0 ...
- css3之文本和颜色功能之text-overflow,word-wrap
语法 text-overflow: clip|ellipsis|string; clip修剪文本.ellipsis显示省略符号来代表被修剪的文本.string使用给定的字符串来代表被修剪的文本. 效果 ...
- Luogu P4011 孤岛营救问题(状态压缩+最短路)
P4011 孤岛营救问题 题意 题目描述 \(1944\)年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛,营救被敌军俘虏的大兵瑞恩.瑞恩被关押在一个迷宫里,迷宫地形复杂,但幸好麦克得到 ...
- bzoj 1053 [HAOI2007]反素数ant——关于质数的dfs / 打表
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1053 写了个打表程序. #include<iostream> #include& ...
- 从Java到C++——union的使用方法
版权声明:本文为博主原创文章,未经博主同意不得用于不论什么商业用途,转载请注明出处. https://blog.csdn.net/luoweifu/article/details/33342965 你 ...