jQuery基础教程学习笔记(六)动画特效
toyiye 2024-09-09 08:56 3 浏览 0 评论
本节主要讲的是隐藏与显示(hide,show,toggle)、上卷下拉(sildeDown,slideUp,slideToggle)、淡入淡出(fadeOut,fadein,fadeToggle,fadeTo)、自定义动画 (animate,stop)以及其他核心方法的使用!
(1)jquery的隐藏和显示动画
jQuery中隐藏元素的hide方法
$elem.hide() 用来隐藏元素
.hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作,快捷参数:.hide("fast / slow")
语法:$(selector).hide(speed,callback)
例:$("button:last").click(function() {
$("#a2").hide({
duration: 3000,
complete: function() {
alert('执行3000ms动画完毕')
}
})
});
或者: $("#btn").click(function() {
$("#right").hide(3000,function(){
alert('执行3000ms动画完毕')
})
})
jQuery中显示元素的show方法
语法:$(selector).show(speed,callback)用法和hide一致!
例:$("button").click(function() {
$("#a1").hide(3000).show(3000)
});
注意:
(1)show与hide方法是修改的display属性,通过visibility属性修改需要通过css方法单独设置
(2)如果样式中使用!important,比如display: none !important,想让.show()方法正常工作,必须使用.css('display', 'block !important')重写样式
(3)如果让show与hide成为一个动画,那么默认执行动画会改变元素的高度,高度,透明度
jQuery中显示与隐藏切换toggle方法
基本的操作:toggle(); 元素的显示与隐藏(display属性)
用法:$(selector).toggle(speed,callback,switch)
也可以直接定位:.toggle(true|false),指定元素的最终效果
例:$("button:first").click(function() {
$(".left").toggle(3000)
});
</script>
(2)上卷下拉效果
jQuery中下拉动画slideDown
slideDown() 方法用于向下滑动元素。
用法:$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
例:$("button:first").click(function() {
$("#a1").slideDown(3000)
});
jQuery中上卷动画slideUp
slideUp() 方法用于向上滑动元素。
语法:$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
例: $("button:last").click(function() {
$("#a2").slideUp(3000,function(){
alert('动画执行结束')
})
});
jQuery中上卷下拉切换slideToggle
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
用法:$(selector).slideToggle(speed,callback);
例:$("#flip").click(function(){
$("#panel").slideToggle();
});
(3)淡入淡出效果
jQuery中淡出动画fadeOut
fadeOut()方法用于淡出可见元素。
用法:$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
例:$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery中淡入动画fadeIn
fadeIn() 用于淡入已隐藏的元素。
用法:$(selector).fadeIn(speed,callback);
例:$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery中淡入淡出切换fadeToggle
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
用法:$(selector).fadeToggle(speed,callback);
例:$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性,但是他们都有个共同的特点,变化的区间要么是0,要么是1,当opacity的值为0时,即隐藏该元素设置为display:none;
jQuery中淡入效果fadeTo
fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
例:$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
jQuery中toggle与slideToggle以及fadeToggle的比较
(1)toggle:切换显示与隐藏效果
(2)sildeToggle:切换上下拉卷滚效果
(3)fadeToggle:切换淡入淡出效果
toggle与slideToggle细节区别:
(1)toggle:动态效果为从右至左。横向动作,toggle通过display来判断切换所有匹配元素的可见性
(2)slideToggle:动态效果从下至上。竖向动作,slideToggle 通过高度变化来切换所有匹配元素的可见性
fadeToggle方法
(1)fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
(2)元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。
(3)元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。
注释:隐藏的元素不会被完全显示(不再影响页面的布局)
(4)自定义动画
jQuery中动画animate
animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性,json写法
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
例:$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
animate() - 使用相对值,可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
animate() - 使用预定义的值,可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
animate() - 使用队列功能 果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
(5)jQuery其他核心方法
jQuery中停止动画stop
stop() 方法用于停止动画或效果,在它们完成之前。stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
(1).stop(); 停止当前动画,点击在暂停处继续开始
(2).stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果goToEnd参数提供true值,那么在队列中的动画其余被删除并永远不会运行
(3).stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值
例:$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
分析:(1)stop():只会停止第一个动画,第二个第三个继续
(2)stop(true):停止第一个、第二个和第三个动画
(3)stop(true ture):停止动画,直接跳到第一个动画的最终状态
jQuery其他核心知识
each() 方法规定为每个匹配元素规定运行的函数。
语法:$(selector).each(function(index,element))
必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置element - 当前的元素(也可使用 "this" 选择器)
例: $.each(['属性1', '属性2'], function(i, item) {
$aaron.append("索引=" + i + "; 元素=" + item);
});//结果索引=0; 元素=属性 索引=1; 元素=属性2
jQuery中查找数组中的索引inArray
jQuery.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回 -1。
语法:jQuery.inArray( value, array ,[ fromIndex ] )
fromIndex规定查找的起始值,默认数组是0开始
例:$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引:4
注意:如果要判断数组中是否存在指定值,你需要通过该函数的返回值不等于(或大于)-1来进行判断
例:var index = $.inArray('a',['a','b','c','d','a','c'],2);
$aaron.text('a的索引是: '+ index)
} //返回4
jQuery中去空格trim方法
jQuery.trim()函数用于去除字符串两端的空白字符,也可以写作$.trim()
例:$("#exec2").click(function() {
alert("值的长度:" + $.trim($("#results2").val()).length)
});
jQuery中DOM元素的获取get方法
如果需要单独操作合集中的的某一个元素,可以通过.get()方法获取到
语法:.get( [index ] )
(1)get方法是获取的dom对象,也就是通过document.getElementById获取的对象
(2)get方法是从0开始索引查找第二个元素可以写作: $(a).get(1)
负索引值参数表示从后往前索引,起始值是-1 例: $(a).get(-2)
eq() 返回的是jquery对象,get()返回的是dom元素,所以$(a).get(1)无法直接通过jquery方法操作,需要通过$($(a).get(1)).css()改变,而$(a).get(1)需要通过$(a).get(1).style.的方式
jQuery中DOM元素的获取index方法
.index()方法,从匹配的元素中搜索给定元素的索引值,从0开始计数。
语法:.index()
.index( selector )
.index( element )
(1)如果不传递任何参数给 .index() 方法,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
(2)如果在一组元素上调用 .index() ,并且参数是一个DOM元素或jQuery对象, .index() 返回值就是传入的元素相对于原先集合的位置
(3)如果参数是一个选择器, .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则 .index() 返回 -1
有点晕吧,看例子:
<ul>
<a></a>
<li id="test1">1</li>
<li id="test2">2</li>
<li id="test3">3</li>
</ul>
$("li").index() 没有传递参数,反正的结果是1,它的意思是返回同辈的排列循序,第一个li之前有a元素,同辈元素是a开始为0,所以li的开始索引是1
如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理:
$("li").index(document.getElementById("test2")) //结果:1
$("li").index($("#test2")) //结果:1
学完这些,基本的教程都已经学完,你就可以尝试写一下一些特效了,或者去看一下你之前看不懂的那些jquery特效,你会发现其实好简单!
相关推荐
- 为何越来越多的编程语言使用JSON(为什么编程)
-
JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON(数据库用json格式存储)
-
在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...
- MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)
-
前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶(json格式对象)
-
一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data(json和formdata提交区别)
-
在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...
- JSON 语法(json 语法 priority)
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解(json的语法规则)
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...
- MySQL JSON数据类型操作(mysql的json)
-
概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...
- JSON的数据模式(json数据格式示例)
-
像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解(后端json格式)
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势(什么叫json)
-
现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类(javascript 包)
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?(json和xml哪个好)
-
JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)