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. vertical-align用法

    父元素下面有两个子元素,第一个子元素设置display:inline-block,第二个子元素设置display:inline-block, vertical-align:top这样两个元素就能顶部对 ...

  2. 老李分享:HTTP协议之协议头

    老李分享:HTTP协议之协议头   当我们打开一个网页时,浏览器要向网站服务器发送一个HTTP请求头,然后网站服务器根据HTTP请求头的内容生成当次请求的内容发送给浏览器.你明白HTTP请求头的具体含 ...

  3. google官方的下拉刷新+自定义上拉加载更多

    转载请标注转载:http://blog.csdn.net/oqihaogongyuan/article/details/50949118 google官方的下拉刷新+自定义上拉加载更多 现在很多app ...

  4. c++ 字符串去重

    ##### c++ 字符串去重 == 需求 == * 编写一个字符串过滤函数,若字符串出现多个相同的字符,将不是首次出现的字符过滤掉. > 输入:"apache" 输出:&q ...

  5. 面试题(一)—Java基础(上)

    1.面向对象的三大特征 (1)封装      封装性指的是隐藏了对象的属性和实现细节,对外仅提供公共的访问方式.      好处: 将变化隔离,提供复用性和安全性. (2)继承      提高代码的复 ...

  6. jmeter读取文件进行参数化时随机取值实现

    jmeter能用来做参数化的组件有几个,但是都没有随机取值的功能,遇到随机取值的需求怎么办呢? 突发奇想,可以用函数_StringFromFile来实现,先来介绍下此函数: 此函数位于函数助手中, 函 ...

  7. 《Algorithms Unlocked》读书笔记1——循环和递归

    <Algorithms Unlocked>是 <算法导论>的合著者之一 Thomas H. Cormen 写的一本算法基础. 书中没有涉及编程语言,直接用文字描述算法,我用 J ...

  8. 自动生成数学题型一 (框架Struts2) 题型如(a+b=c)

    1. 加减乘除 1.1 随机生成制定范围的整数 /** * 随机产生一个被限定范围的整数 * * @param num1 * 定义起始范围 num1 * @param num2 * 定义终止范围 nu ...

  9. xshell配色Solarized Dark

    转自:xshell配色Solarized Dark [Solarized_Dark] text(bold)= magenta(bold)=6c71c4 text= white(bold)=fdf6e3 ...

  10. NuGet 自定义配置

    默认配置: 默认配置文件的路径%APPDATA%\NuGet\NuGet.Config (DOS) 或 $ENV:APPDATA\NuGet\NuGet.Config (PowerShell),(例如 ...