jQuery 动画用法
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<div></div>
</body>
<script>
/* 1.jQuery.show()和jQuery.hide() 显示与隐藏
a.不传参数，没有动画效果，show()：直接显示 hide()：直接隐藏，比较常用
b.show(speed)和hide(speed)
speed:动画的持续时间 ，可以是毫秒值 ，还可以是固定字符串
fast:200ms normal:400ms slow:600ms
c.show([speed], [callback])和hide([speed],[ callback])
[ ]中括号表示可选择参数，并非表示数组
callback: 回调函数 */
$(function () {
$("input").eq(0).click(function () {
$("div").show(1000, function () {
console.log("哈哈，动画执行完成啦");
})
});
$("input").eq(1).click(function () {
$("div").hide();
})
});
</script>
<script>
$(function () {
//滑入（slideDown） 滑出：slideU
// jQuery.slideDown()滑入动画:从上往下显示
// jQuery.slideUp()滑出动画:从下往上隐藏
// jQuery.slideToggle()如果是滑入状态，就执行滑出的动画，如果是滑出状态，则不操作
// 用法和jQuery.show()和jQuery.hide()用法一样，
// 不同是如果不传speed参数，默认为normal
$("input").eq(0).click(function () {
$("div").slideDown(1000, function () {
console.log("额呵呵");
});
});
$("input").eq(1).click(function () {
$('div').slideUp();
})
$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').slideToggle();
})
});
</script>
<script>
$(function () {
//淡入：fadeIn 淡出：fadeOut 切换：fadeToggle
//jQuery.fadeIn()淡入动画
//jQuery.fadeOut()淡出动画
//jQuery.fadeToggle()如果是淡入状态，就执行淡出动画，如果为淡出状态，则不操作
//用法和jQuery.show()和jQuery.hide()用法一样，
//不同是如果不传speed参数，默认为normal
$("input").eq(0).click(function () {
$("div").fadeIn(2000);
});
$("input").eq(1).click(function () {
$("div").fadeOut(1000);
})
$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').fadeToggle();
})
});
</script>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
#box2 {
background-color: blue;
margin-top: 150px;
} #box3 {
background-color: yellowgreen;
margin-top: 300px;
}
</style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div> <script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
//第一个参数：对象，里面可以传需要动画的样式
//第二个参数：speed 动画的执行时间
//第三个参数：动画的执行效果
//第四个参数：回调函数
$("#box1").animate({left:800}, 8000);
//swing:秋千 摇摆
$("#box2").animate({left:800}, 8000, "swing");
//linear:线性 匀速
$("#box3").animate({left:800}, 8000, "linear", function () {
console.log("hahaha");
});
})
});
</script>
</body>
</html>
jQuery 动画用法的更多相关文章
- JQuery datepicker 用法
JQuery datepicker 用法 jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加 ...
- jQuery动画详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. jQuery 动画 jQuery提供的一组网页中常见的动画效果,这些动画 ...
- jQuery 动画效果
推荐网址:http://www.php100.com/manual/jquery/,用法教学,包括实例. 分类:显示隐藏.淡入淡出.滑动.自定义. <%@ Page Language=" ...
- python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jQuery动画知识总结
jQuery动画概述 我们之前实现的下拉菜单的案例,是没有动画效果的,但是在日常开发中,动画效果是经常会用到的,所以我们可以尝试使用jQuery动画,将下拉菜单案例实现的更动感一些. jQuery提供 ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- jQuery系列（三）：jQuery动画效果
jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.显示动画 方式一: $("div").show(); 解释:无 ...
- python 全栈开发，Day53(jQuery的介绍，jQuery的选择器，jQuery动画效果)
01-jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...
- jQuery动画的实现
没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...
随机推荐
- MySQL之——GROUP BY分组取字段最大值
转载自:http://blog.csdn.net/l1028386804/article/details/54657412 假设有一个业务场景,需要查询用户登录记录信息,其中表结构如下: CREATE ...
- Elk+redis的配置
1.先到网站上下载 https://www.elastic.co/cn/downloads,需要的工具 Elasticsearch,Kibana,Logstash,Filebeat. 先把redis安 ...
- lua简单包装
#ifndef _LUA_WRAPPER_ #define _LUA_WRAPPER_ extern "C" { #include "lua.h" #inclu ...
- Disruptor 系列（二）使用场景
Disruptor 系列(二)使用场景 今天用一个订单问题来加深对 Disruptor 的理解.当系统中有订单产生时,系统首先会记录订单信息.同时也会发送消息到其他系统处理相关业务,最后才是订单的处理 ...
- MongoDB管理与开发实战详解文摘
第1篇 基础篇 第1章 MongoDB简介 关系型数据库面临的问题:数据库并发负载高,海量数据存储与访问,数据库数据越来越大,事务管理的负担,关系型数据库读.写实时性的忽略,多表关联查询被弱化 第2章 ...
- 20169205实验三 敏捷开发与XP实践
20169205实验三 敏捷开发与XP实践 实验内容及步骤 (一)敏捷开发与XP基本知识 敏捷开发(Agile Development)是一种以人为核心.迭代.循序渐进的开发方法. 一项实践在XP环境 ...
- CDI(Weld)高级<4> Event(事件) （转）
目录[-] 1. Event payload(事件的有效载入) 2. Event observers(event的观察者) 3. Event producers(event生产者) 4.Annotat ...
- Android 属性动画实现一个简单的PopupWindow
1.今天看到一个PopupWindow的效果如图: 2.其实就是属性动画的一个简单实用就ObjectAnimator就可以的,想实现更多,更灵活的可以用ValueAnimator 3.直接上代码: p ...
- HTTP Error 502.5 - Process Failure Win10 VS可以正常访问，部署本地IIS报错
最近本core得升级导致各种问题,之前刚解决了server2012的502.5问题 今天本机又出现这个问题. 情况描述:VS可以正常调试查看,部署本地IIS访问 错误502.5 分析:VS可以使用II ...
- 大咖分享 | 一文解锁首届云创大会干货——下篇（文末附演讲ppt文件免费下载）
本文承接上一篇:大咖分享 | 一文解锁首届云创大会干货--上篇(文末附演讲ppt文件免费下载),第一届云创大会留下干货太多,这里追加下篇,同样,文末提供大咖们的干货分享,点击附件可免费下载. ...