Jquery动画效果设置大全
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
display: none;
}
</style>
</head>
<body>
//Jquery动画设置所有方法如下
show() :显示 display->block
hide() 隐藏 display->none
toggle() 切换显示和隐藏
slideDown() 向下滑动 改变display和高度(参数为毫秒,滑动时间)
slideUp() 向上滑动 改变display和高度
slideToggle() 切换上下滑动
fadeIn() 淡入 opacity->1
fadeOut() 淡淡入出 opacity->0
fadeTo() 改变透明度
fadeToggle() 切换淡入淡出
animate() 自定义动画
stop() 停在当前位置
finish() 终止动画,停在最终位置
delay() 设置延迟
//html代码
<button>显示隐藏</button>
<button>结束</button>
<button>停止</button>
<div id="box"></div>
<script type="text/javascript">
//例子
$("button").eq(0).click(function(){
$("#box").show(); //第一个按钮点击的时候,div元素从隐藏的状态显示出来
});
$("button").eq(0).mouseover(function(){
$("#box").show(); //鼠标放到第一个按钮的时候,div元素从隐藏的状态显示出来
}).mouseout(function(){
$("#box").hide(); //鼠标移开时,div元素从显示状态隐藏起来
});
$("button").eq(0).click(function(){
$("#box").toggle(); //第一个按钮点击的时候,div元素从显示状态隐藏起来
});
$("button").eq(0).click(function(){
//$("#box").slideDown(1000); //向下的滑动时间是1秒
$("#box").slideToggle(); //切换上下滑动
});
$("button").eq(0).click(function(){
$("#box").fadeIn(2000); //淡入时间为2秒,淡入的意思是显示出来时间
//$("#box").fadeOut(2000);
$("#box").fadeToggle(2000); //淡入淡出
//$("#box").fadeTo(2000,0.9); //改变透明度
});
$("#box").css("display","block");
$("button").eq(0).click(function(){
$("#box").delay(2000).animate({ //第一个按钮点击的时候,div元素将再2秒后飘逸,
"margin-left":"200px",
"margin-top":"200px"
},2000); //这个时间是指整个过程的持续时间
});
$("button").eq(1).click(function(){
$("#box").finish(); //第二个按钮点击的时候,运动中的动画立刻停在结束位置
});
$("button").eq(2).click(function(){
$("#box").stop(); //第三个按钮点击的时候,正在运动中的动画立刻停止当前位置
});
//部分网页显示效果
</script>
</body>
</html>
Jquery动画效果设置大全的更多相关文章
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- jquery动画效果---animate()--滚屏
jquery动画效果---animate()方法---W3school
- jQuery自学笔记(三):jQuery动画效果
jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...
- 一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏
jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画 ...
- jquery动画效果总结
一.jquery的动画速度fast-slow对应着600ms,200ms,不写是400ms 二.禁用jquery的动画 将jQuery.fx.off设置为true即可 $(".stoppin ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
01-jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...
- jQuery操作标签,jQuery事件操作,jQuery动画效果,前端框架
jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...
随机推荐
- leetcode网解题心得——61. 旋转链表
目录 leetcode网解题心得--61. 旋转链表 1.题目描述 2.算法分析: 3.用自然语言描述该算法 4.java语言实现 5.C语言实现 leetcode网解题心得--61. 旋转链表 1. ...
- Keras入门——(1)全连接神经网络FCN
Anaconda安装Keras: conda install keras 安装完成: 在Jupyter Notebook中新建并执行代码: import keras from keras.datase ...
- 在Windows上使用Docker运行.NET COE应用
在Windows上使用Docker运行.NET COE应用 执行步骤: 1:安装Docker For Windows(注意:docker for windows-64位Windows 10.必须开启 ...
- 弱密码检测JR!
1.JR(Joth the Ripper)简介·一款密码分析工具,支持字典式的暴力破解·通过对 shadow 文件的口令分析,可以检测密码·官方网站:http://www.openwall.com/j ...
- [ DLPytorch ] 注意力机制&机器翻译
MachineTranslation 实现过程 rstrip():删除 string 字符串末尾的指定字符(默认为空格). 语法:str.rstrip([chars]) 参数:chars -- 指定删 ...
- Ubuntu新手指引-软件包apt命令使用
看到这个博客,你十有八九是刚接触Ubuntu,不知从何下手.Ubuntu社区虽然现在不活跃,但里有很多文,可以帮助你快速上手,比如Ubuntu中文社区新手指引. 软件包的管理常常涉及root权限,普通 ...
- push 、pop 、unshift 、shift
push .pop : 操作数组后面 unshift .shift :操作数组前面 push.unshift : 字母多的添加 pop .shift : 字母少的删除 push.unshift : 添 ...
- PAT A1114 Family Property
用并查集处理每个家庭的信息,注意标记~ #include<bits/stdc++.h> using namespace std; ; bool visit[maxn]={false}; i ...
- HashMap 原理?jdk1.7 与 1.8区别
HashMap 结构 以及 1.7 与 1.8 一.区别 01. jdk 1.7 用的是头插法,而jdk1.8以后使用的是尾插法?为什么这样做呢?因为 JDK 1.7 是用单链表进行纵向延伸,采用头插 ...
- Python学习第十四课——面向对象基本思想part1
面向对象的基本思想 # 写法1 person1 = { 'name': 'hanhan', ', 'sex': '男' } def xue_xi(person): print('%s在学习' % pe ...