<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background: orange;
display:none;
}
</style>
<script src="jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function() {
$('#bt1').on('click', function() {
$('p').toggle(1000);
})
$('#bt_fade_in').on('click',function(){
$('#div_fade_in').fadeIn(1000);
});
$('#bt_fade_out').on('click',function(){
$('#div_fade_in').fadeOut(1000);
});
$('#bt_fade_to').on('click',function(){
$('#div_fade_in').fadeTo(1000,.5);
});
});
</script>
</head> <body>
<p>被隐藏对象</p>
<button id="bt1">隐藏</button>
<button id="bt_fade_in">fadeIn</button>
<button id="bt_fade_out">fadeOut</button>
<button id="bt_fade_to">fadeTo设置透明度</button>
<br/>
<div id="div_fade_in">FadeIn</div>
</body> </html>

 //除此之外还有slideDown, slideup, 每个动画都有一个执行完毕后的回调函数

jQuery 常用动画的更多相关文章

  1. jquery-12 jquery常用动画效果有哪些

    jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...

  2. JQuery常用动画实现函数

    1.上拉.下拉和切换 slideup().slidedown().slideToggle() JQuery里面的切换太吊了,它自带判断当前显示状态,如果为显示就执行隐藏,如果为隐藏就执行显示. 2.淡 ...

  3. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  4. JQuery常用实用的事件[较容易忽略的方法]

     JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...

  5. jquery常用函数与方法汇总

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...

  6. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  7. 10个非常炫酷的jQuery相册动画赏析

    我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...

  8. 05-老马jQuery教程-动画

    前言 jQuery的动画系统做的非常出色,而且把最常用的显示.隐藏.淡入淡出.滑动显示和折叠凳效果都做了很好的封装.跟jQuery的选择器和事件配合起来,可以实现很多很绚的效果,而且简单易用兼容性好. ...

  9. 关于jquery所有动画都有速度和动画的方向(在宽度方向上的动画)?

    不只是jquery的 animate 动画, 才有时间的 参数, 实际上, 在所有的动画中, 包括: show/hide/toggle, slideup/slidedown/slidetoggle, ...

随机推荐

  1. 图像fft和wavelet变换矩阵和向量区别 dwt2和wavedec2联系

    1.  对于小波变换,dwt2 :单级离散2维小波变换 wavedec2 :多级2-D小波分解 matlab中这两者联系是都能对图像进行小波分解,区别是dwt2是二维单尺度小波变换,只能对输入矩阵X一 ...

  2. Linux技巧学习

    主要是收集一些Linux的技巧: 1.编写可靠shell脚本的八个建议 指定bash,推荐使用 /usr/bin/env bash 和 /bin/bash,不要使用/usr/bin/bash. set ...

  3. JAVA多线程和并发基础面试问答

    转载: JAVA多线程和并发基础面试问答 多线程和并发问题是Java技术面试中面试官比较喜欢问的问题之一.在这里,从面试的角度列出了大部分重要的问题,但是你仍然应该牢固的掌握Java多线程基础知识来对 ...

  4. Qt之绘制闪烁文本

    简述 根据之前的二位绘图,我们可以很轻松的进行文本的绘制,如果需要一些特效,比如:文本闪烁.我们就必须借助其它辅助类来完成. 简述 原理 实现 效果 源码 原理 主要涉及两个辅助类: QFontMet ...

  5. C与C++在const用法上的区别

    首先,C和C++在大体结构上不同,却在语法上相同.  所以在使用的时候,我们会时常遇到一些莫名其妙的问题,觉得语法上是正确的,但是编译的时候却出现一个红色的 error! 比如今天我遇到的这个有意思的 ...

  6. 最小生成树练习2(Kruskal)

    两个BUG鸣翠柳,一行代码上西天... hdu4786 Fibonacci Tree(生成树)问能否用白边和黑边构成一棵生成树,并且白边数量是斐波那契数. 题解:分别优先加入白边和黑边,求出生成树能包 ...

  7. JavaScript第一部分

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

  8. Objective-C:Foundation框架-常用类-NSMutableArray

    NSMutableArray是NSArray对的子类,它是可变的,可以随意添加或者删除元素.与Array,也有静态和动态两种创建方法.也可已使用NSArray的方法来创建NSMutableArray. ...

  9. JDE处理选项

    处理选项为JDE的一种数据结构,命名方式如下: The name of a data structure can be a maximum of characters-only if you begi ...

  10. [转]CentOS更改yum源与更新系统

    [1] 首先备份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/Cent ...