jQuery操作效果详解

编辑：宝哥软件园来源：互联网时间：2021-09-04

新天龙八部

角色扮演 | 1.85G

评分

立即下载

有五种效果操作：1。基本，2。滑动，3。淡入淡出，4。自定义，和5。环境

显示()，隐藏()，切换()

代码如下：

Html代码：

p style=' display : none ' hello/p输入id=' BTN 1 ' type=' button ' value=' switch '/jQuery代码：

$('p ')。show()；

p隐藏在开头。执行完这一行代码后，显示P

$('p ')。hide()；

现在显示P标签。执行完这一行代码后，P隐藏了

$('#btn1 ')。单击(function(){ $('p '))。切换(“显示”)；})将一个click事件绑定到按钮，当p是真实的时隐藏它，如果p是隐藏的时显示它。

注释：show()，显示隐藏的匹配元素。

Hide()隐藏显示的元素。

Toggle()用于绑定两个或多个事件处理函数，以响应所选元素的交替单击事件。

向下滑动()，向上滑动()，滑动切换()

代码如下：

Html代码：

div/div input tid=' BTN 1 ' type=' button ' value=' expand '/input tid=' BTN 2 ' type=' button ' value=' shrink '/input tid=' BTN 3 ' type=' button ' value=' switch '/jQuery代码：

$('#btn1 ')。单击(function(){ $('div ')。slide down()；});将id为btn1的按钮与click事件绑定，当单击展开按钮时，div向下展开。$('#btn2 ')。单击(function(){ $('div ')。slide up()；});将click事件绑定到id为btn2的按钮，当单击展开按钮时，div向上收缩。$('#btn3 ')。单击(function(){ $('div ')。slide Toggle()；});用click事件绑定id为btn3的按钮，当div向下展开时，会向上收缩，反之亦然。

注释：slideDown()，向下展开。

SlideUp()，向上收缩。

SlideToggle()，它通过更改高度来切换所有匹配元素的可见性。

效果如下：

fadeIn()，fadeOut()，fadeTo()，fadeToggle()

代码如下：

Html代码：

div/div input tid=' BTN 1 ' type=' button ' value='淡入'/input tid=' BTN 2 ' type=' button ' value='淡出'/input tid=' BTN 3 ' type=' button ' value=' switch '/input tid=' BTN 4 ' type='

$(“输入”)。第一个()。单击(function(){ $('div ')。fade in(1000)；});用选择器选择第一个输入，绑定click事件到上面，一开始div是隐藏的，一秒钟内慢慢显示，实现淡入效果。

$(“输入”)。等式(1)。单击(function(){ $('div ')。停止()。fade out(1000)；//$('div ')。fade out(1000)；});用选择器选择第二个输入，绑定click事件到上面，现在显示div，一秒内慢慢隐藏，实现淡入淡出效果。

$(“输入”)。等式(2)。单击(function(){ $('div ')。停止()。fade toggle(1000)；})用选择器选择第三个输入，将click事件绑定到它，显示div时让它淡出，隐藏div时让它淡入。

$(“输入”)。等式(3)。单击(function(){ $('div ')。停止()。fadeTo(1000，0.5)；})用选择器选择第四个输入，将click事件绑定到它，并设置淡入(淡出)时间和透明度。

注：fadeIn()，通过不透明度的变化实现所有匹配元素的淡入效果。

FadeOut()，通过不透明度的变化来实现所有匹配元素的淡入淡出效果。

FadeTo()以渐进的方式将所有匹配元素的不透明度调整为指定的不透明度。

FadeToggle()，它通过不透明度的变化来切换所有匹配元素的淡入淡出效果。

效果如下：

动画()，停止()，延迟()

代码如下：

Css代码：

div { width:100px高度：100 px；背景：红色；} html代码：

DivST Song Ze/div输入id=' btn1 '类型=' button '值='显示效果'/输入id=' btn2 '类型=' button '值='停止动画'/jQuery代码：

$ ('# btn1 ')。单击(function () {$ ('div ')。延迟(2000年)。制作动画({'width' :' 300px '，' height' :' 300px '，' font-size' :)将click事件绑定到id为btn1的按钮。点击按钮时，会延迟两秒钟，div的宽度、高度和字体大小为

逐渐变为设定值，两秒后打印“动画完成”。

$('#btn2 ')。单击(function(){ $('div ')。stop()；})将click事件绑定到id为btn2的按钮。当div制作动画时，单击按钮，动画将停止。

注意：animate()，一个创建自定义动画的函数。

Stop()，停止在指定元素上运行的所有动画。

Delay()，设置延迟以延迟队列中后续项目的执行。

效果如下：