jQuery操作之效果

效果一共分五大类

一.基本

二.滑动

三.淡入淡出

四.自定义

五.设置

咱们先来看一下基本类

一.基本又分为

show()

hide()

toggle()

html代码

<div></div>
<p>123</p>
<input type="button" id="btn" value="显示">
<input type="button" id="btn1" value="隐藏">
<input type="button" id="btn2" value="切换">

css代码

div{
width: 100px;
height: 100px;
background: red;
display: none;
}

jquery代码

   $("#btn").click(function(){
//显示div 3秒执行完
$("div").show(3000);
}) $("#btn1").click(function(){
//隐藏div 3秒执行完
$("div").hide(3000);
}) $("#btn2").click(function(){ //切换显示隐藏div 2秒执行完
$("div").toggle(2000);
})

效果如下图

二.滑动又分为

show()

hide()

toggle()

html和css代码都一样

jquery代码

    $("#btn").click(function(){
//展开div
$("div").slideDown();
}) $("#btn1").click(function(){
//收缩div
$("div").slideUp();
}) $("#btn2").click(function(){ //切换展开收缩div
$("div").slideToggle();
})

效果图

三.淡入淡出又分为

fadeIn()

fadeOut()

fadeTo()

fadeToggle

css代码

     div{
width: 200px;
height: 400px;
background: red;
display: none;
position:absolute;
top:0;
left:0;
}
input{
margin-top:420px;
}

jquery代码

    $("#btn").click(function(){
//渐渐淡入
$("div").fadeIn(2000);
//两秒以后开始执行动画
$("div").fadeTo("slow",2000);
}) /$("#btn1").click(function(){
//渐渐淡出
$("div").fadeOut(2000);
}) $("#btn2").click(function(){ //切换淡入淡出div
$("div").fadeToggle(2000);
})

效果图

四.自定义(这个效果是最常用的一个效果,各种效果都能实现)

animate()

stop()

delay()

css代码

     div{
width: 200px;
height: 400px;
background: red;
position:absolute;
top:0;
left:0;
}
input{
margin-left:700px;
}

jquery代码

    $("#btn").click(function(){
//设置动画效果
$("div").animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})
$("#btn1").click(function(){
//终止进行中的动画效果
$("div").stop().animate()
})
$("#btn2").click(function(){
//延时动画效果
$("div").delay(500).animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})

效果图

五.设置

$.fx.off()

$.fx.interval()//相当于定时器

jquery代码

 //暂停一切动画效果
$.fx.off=true;
$("#btn").click(function(){
//设置动画效果
$("div").animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})

jquery之效果操作的更多相关文章

  1. 解密jQuery内核 DOM操作的核心buildFragment

    文档碎片是什么 http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3 DocumentFragment is a & ...

  2. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  3. js,jQuery和DOM操作的总结(二)

    jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...

  4. jquery之属性操作

    jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...

  5. jQuery之筛选操作

    jQuery之筛选操作 筛选操作分三大类:过滤,查找,串联 eq(),first(),last(),hasClass(),filter(),is() html代码 jQuery代码 效果如下: map ...

  6. python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  7. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  8. jQuery的效果(动画)

    jquery的效果(动画) show 概念:显示隐藏的匹配元素 语法:show(speed,callback) 参数:speed:三种预定速度之一的字符串('slow','normal','fast' ...

  9. JQUERY链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...

随机推荐

  1. 山谈c中printf格式修饰符

    废话不多说,简单粗暴地上图. (一)初始定义 (二)运行结果 (三)规律总结 对于如下: printf("%7.4d",12); printf("%4.7f", ...

  2. python学习随笔(一)

    我是为记录学习python的过程而开通了博客,希望以后自己能看看,也希望能分享一些给初学者. 话不多说,开始第一篇. (一)python解释器. python2和3,现在python2是主流,但是py ...

  3. 转接口IC GM7122:BT656转CVBS芯片 视频编码电路

    1 概述    视频编码电路主要实现接收8位CCIR656格式的YUV数据,(例如MPEG解码数据),并编码成CVBS信号,经过D/A转换后输出.基本的编码功能包括副载波产生,色差信号调制,同步信号内 ...

  4. 高吞吐koa日志中间件

    Midlog中间件 node服务端开发中少不了日志打点,而在koa框架下的日志打点在多进程环境中日志信息往往无法对应上下文,而且在高并发下直接进行写buffer操作(内核调用writev)也会造成内存 ...

  5. 解决Mybatis连接Sql server 出现 Cannot load JDBC driver class 'com.mysql.jdbc.Driver '的问题

    tomcat启动的时候没有错误,但是进行数据库操作就会有错误. 在网上找了很久  好不容易找到解决方法 转自 http://blog.csdn.net/ro_bot/article/details/5 ...

  6. Doxygen + Graphviz windows下安装配置(图解)

    查看一些开源代码经常被一些函数的调用关系给绕进去,经过网上查阅资料,发现了这个好用的方法,拿出来和大家分享下安装和应用的过程. 本人常用windows系统,所以主要讲解下windows下相关的内容 要 ...

  7. CSharpGL(41)改进获取字形贴图的方法

    CSharpGL(41)改进获取字形贴图的方法 在(http://www.cnblogs.com/bitzhuwei/p/CSharpGL-28-simplest-way-to-creating-fo ...

  8. 利刃 MVVMLight 7:命令深入

    上面一篇我们大致了解了命令的基本使用方法和基础原理,但是实际在运用命令的时候会复杂的多,并且有各种各样的情况. 一.命令带参数的情况: 如果视图控件所绑定的命令想要传输参数,需要配置 CommandP ...

  9. js倒计时,秒倒计时,天倒计时

    按天倒计时 HTML代码1: <Script Language="JavaScript"> <!-- Begin var timedate= new Date(& ...

  10. js表白心形特效

    好久没有仔细钻研技术了,闲下来借鉴一下做出一些效果 友情链接: http://tiepeng.applinzi.com/love_you/ ;;background:#ffe;font-size:12 ...