jQuery——入门（二）动画

jQuery —— 入门（二）动画/效果

一、案例解析

hide([speed,[easing],[fn]])

[]：意思表示的方括号中的东西是可选的，可有可无的；

[]中，会有对应的参数名称【变量名称】，根据变量名称，有一个表面的认识。

二、基础动画效果 —— show（）、hide（）显示与隐藏

1、show（）—— 显示效果将选择器选中的标签显示到页面上

语法：selector.show();

扩展：selector.show(speed) speed：显示动画的速度快慢，预定义[slow, normal, fast]

selector.show(speed,fn) speed：显示动画速度的快慢 ; fn：动画执行完毕之后要执行的函数

selector.show([speed,[easing],[fn]])

speed：三种预定速度之一的字符串("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)

easing：切换效果，默认是"swing"，可用参数"linear" ;

注：swing是动态效果，随着动画的开始，效果会逐渐加快，然后再慢下来直到动画结束。linear动画的效果比较平稳。

fn：在动画完成时执行的函数，每个元素执行一次。

案例1：显示所有段落

HTML代码：<p style="display: none">Hello</p>
JQuery代码：$("p").show();

案例2：用缓慢的动画将隐藏的段落显示出来，历时600毫秒。show(speed)

HTML代码：<p style="display: none">Hello</p>
JQuery代码：$("p").show(“slow”);

案例3：用迅速（fast）的动画将隐藏的段落显示出来，历时200毫秒，并在之后执行反馈。show(speed,fn)

HTML代码：<p style="display: none">Hello</p>
JQuery代码：$("p").show(“fast”,function(){
$(this).text("动画迅速显示 ...");
});

案例4：将隐藏的段落用将近4秒的时间显示出来，并在之后执行一个反馈。

HTML代码：<p style="display: none">Hello</p>

JQuery代码：$("p").show(4000,function(){
$(this).text("动画用4s时间显示出来...");
});

2、hide（）—— 隐藏效果将选择器选中的标签从页面上隐藏起来

语法：selector.hide()；

扩展：selector.hide(speed) speed：显示动画的速度快慢，预定义[slow, normal, fast]

selector.hide(speed,fn) speed：显示动画速度的快慢 ; fn：动画执行完毕之后要执行的函数

selector.hide([speed,[easing],[fn]])

speed：三种预定速度之一的字符串("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)

easing：切换效果，默认是"swing"，可用参数"linear" ;

注：swing是动态效果，随着动画的开始，效果会逐渐加快，然后再慢下来直到动画结束。linear动画的效果比较平稳。

fn：在动画完成时执行的函数，每个元素执行一次。

案例1：隐藏所有段落
HTML代码：<p>Hello</p>

JQuery代码：$("p").hide();

案例2：用600毫秒的时间将段落缓慢的隐藏。 hide(speed)

HTML代码：<p>Hello</p>

JQuery代码：$("p").hide(“slow”);

案例3：用200毫秒将段落迅速隐藏，之后弹出一个对话框。hide(speed,fn)

HTML代码：<p>Hello</p>

JQuery代码：$("p").hide(“fast”,function(){
$(this).text("动画迅速隐藏 ...");
});

三、切换动画效果 —— toggle()

1、toggle() —— 切换元素的可见状态 (toggle()方法在jquery1.9以后的版本官方不再推荐使用)

语法：selector.toggle();

描述：如果元素为隐藏状态，则显示元素；如果元素为显示状态，则隐藏元素。

2、扩展：selector.toggle（speed） speed:动画效果切换的速度快慢，默认是 "0"毫秒。可能的值：slow，normal，fast。"

selector. toggle(speed, fn) speed：显示动画速度的快慢 ; fn：动画执行完毕之后要执行的函数

selector.toggle([speed,[easing],[fn]])
speed：动画效果切换的速度快慢
easing：切换效果，默认是"swing"，可用参数"linear" ;
fn：在动画完成时执行的函数，每个元素执行一次。

selector.toggle(Boolean) Boolean：true表示初始状态为显示，false表示初始状态为隐藏。

3、案例1：对表格切换显示/隐藏

HTML代码：<p>Hello</p>

JQuery代码：$("p").toggle();

案例2：用600毫秒的时间将段落缓慢的切换显示状态

HTML代码：<p>Hello</p>

JQuery代码：$("p").toggle("slow"); //第一种用法，动画切换

案例3：用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。

HTML代码：<p style="dispaly:none">Hello</p>

JQuery代码：$("p").toggle("fast",function(){
alert("动画显示...");
});

注：$('#foo').toggle(showOrHide);
==》相当于 if (showOrHide) {
$('#foo').show();
} else {
$('#foo').hide();
}

//第二种用法，函数的多次点击执行

$(selector).toggle(
function() { code1 opration… },
function() { code2 opration… },
function() { code3 opration… }
);

四、滑动动画效果 —— slideUp()、slideDown()、slideToggle()

1、slideUp —— 向上滑动隐藏元素

语法：selector.slideUp();

描述：通过高度变化（向上减小）来动态隐藏指定元素

扩展：slideUp(speed)

slideUp(speed,fn)

slideUp(speed,easing,fn)

案例1：用600毫秒缓慢的将段落滑上

JQuery代码：$("p").slideUp("slow")

案例2：用200毫秒快速将段落滑上，之后弹出一个对话框
JQuery代码：$("p").slideUp("fast",function(){
alert("动画向上滑落...");
});

2、slideDown —— 向下滑动显示元素

语法：selector.slideDown();

描述：通过高度变化（向下增加）来动态显示指定元素

扩展：slideUp(speed)

slideUp(speed,fn)

slideUp(speed,easing,fn)

案例1：以滑动方式显示隐藏的 <p> 元素：
JQuery代码：$(".btn2").click(function(){
$("p").slideDown();
});

案例2：用600毫秒缓慢的将段落滑下

JQuery代码：$("p").slideDown("slow");

案例3：用200毫秒快速将段落滑下，之后弹出一个对话框
JQuery代码：$("p").slideDown("fast",function(){
alert("动画向下滑落...");
});

3、slideToggle —— 滑动切换显示状态

语法：selector.slideToggle()

描述：通过高度变化，动态切换指定元素的显示/隐藏状态

扩展：slideToggle(speed)

slideToggle(speed,fn)

slideToggle(speed,easing,fn)

五、淡入淡出动画效果 —— fadeIn()、fadeOut()、fadeTo()、fadeToggle()

1、fadeIn() —— 淡入动画效果

语法：selector.fadeIn();

描述：通过逐渐变化透明度来显示指定的元素

扩展：fadeIn(speed)

fadeIn(speed,fn)

fadeIn(speed,easing,fn)

2、fadeOut() —— 淡出动画效果

语法：selector.fadeOut();

描述：通过逐渐变化透明度来隐藏指定的元素

扩展：fadeOut(speed)

fadeOut(speed,fn)

fadeOut(speed,easing,fn)

3、fadeTo() —— 调整到指定透明度效果

语法：selector.fadeTo(opacity);

描述：通过透明度的变化，切换到指定透明度的状态

扩展：fadeTo(speed,opacity)

fadeTo(speed,opacity,fn)

fadeTo(speed,easing,fn)

注：speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字。
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

案例1：使用淡入效果来显示一个隐藏的 <p> 元素：

JQuery代码：$(".btn2").click(function(){
$("p").fadeIn();
});

案例2：用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度

JQuery代码：$("p").fadeTo("slow",0.66);

案例3：用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框

JQuery代码：$("p").fadeTo("fast", 0.25, function(){
alert("动画透明度变为0.25");
});

4、fadeToggle() —— 动态调整显示状态

语法：selector.fadeToggle();

描述：通过透明度的变化，切换指定元素的显示/隐藏状态

扩展：fadeToggle(speed,opacity)

fadeToggle(speed,opacity,fn)

fadeToggle(speed,easing,fn)

案例1：用600毫秒缓慢的将段落淡入

JQuery代码：$("p").fadrToggle("slow","linear");

案例2：用200毫秒快速将段落淡入，之后弹出一个对话框

JQuery代码：$("p").fadeToggle("fast", function(){
alert("动画淡入");
});

六、自定义动画效果 —— animate()

1、自定义动画效果，核心关键在于指定动画结果样式属性对象，这个对象中每个属性都表示一个可以变化的样式属性（如：hight，top，opacity等等）

2、语法：selector.animate(params, [speed,] [easing,] [fn]);

3、描述：按照指定的params中的参数，执行指定的动画效果

4、案例1：点击按钮后div元素的几个不同属性一同变化

HTML代码：<button id="go"> Run</button>

<div id="block">Hello!</div>

JQuery代码：// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});

案例2：让指定元素左右移动

HTML代码：<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>

JQuery代码：$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});

$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});

案例3：在600毫秒内切换段落的高度和透明度

JQuery代码：$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");

案例4：用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

JQuery代码：$("p").animate({
left: 50, opacity: 'show'
}, 500);

案例5：一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数，这个参数才起作用。

JQuery代码：$("p").animate({
opacity: 'show'
}, "slow", "easein");

案例6：动画小应用 ------ 点击button按钮，动画开始

HTML代码：<div><div>

CSS：div{width:50px;height:50px;background-color:red}

JQuery代码：<script type="text/javascript">
  $(function(){
$("button").click(function(){
  move();
  });
function move(){
  $("div").animate({width:200},1000,function(){
$(this).animate({width:50},1000,function(){
move();
  });
  });
}
})
  </script>

注：动画是顺序执行的。

七、动画暂停 —— stop()

1、语法：selector.stop();

2、描述：停止选中元素当前正在执行的动画，不影响其他的动画执行过程。用于停止动画或效果，在它们完成之前。

适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

3、案例1：停止当前正在运行的动画

JQuery代码：$("#stop").click(function(){
$("#box").stop();
});

案例2：点击Go之后开始动画,点Stop之后会在当前位置停下来

HTML代码： <button id="go">Go</button>

JQuery代码：// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});

// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});

注：jQuery中有个动画队列的机制。当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。
问题：用户的操作往往都比动画快，如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，影响到展示效果
处理：1.Query中有stop这个方法可以停止当前执行的动画，并且它有两个布尔参数，默认值都为false。第一个参数为true时会清空动画队列，第二个参数为true时会瞬间完成掉当前动画。所以，我们经常使用obj.stop(true,true)来停止动画。

2.jquery对象.stop(参数1,参数2) 两个参数都是可选的布尔值参数都不写时第一个参数默认为false 不会停止所有的动画当前动画停止后后面的动画继续
如果第一个参数为true时,会停止所有的动画，第二个参数表示是否允许完成当前的动画,true表示允许,false表示不允许.此参数起作用必须在参数1存在的情况下才能起作用.
例： $("div").stop(false);
$("div").stop(true);
$("div").stop(false,true);//直接跳到当前动画的末尾执行完毕当前动画再执行后面的动画
$("div").stop(false,false);//和默认不加参数的效果是一样的
$("div").stop(true,false);//和直接第一个参数为true时是一样
$("div").stop(true,true);//和直接第一个参数为true时是一样
$("div").stop(true,false).fadeToggle(1000);

八、延迟执行效果 —— delay()

1、语法：selector.delay(time);

2、描述：将选中元素需要执行的效果延迟time毫秒 (设置一个延时来推迟执行队列中之后的项目)

3、案例：在.slideUp() 和 .fadeIn()之间延时800毫秒。

HTML代码：<div id="foo /"></div>

JQuery代码：$('#foo').slideUp(300).delay(800).fadeIn(400);

$(('#foo').hide(1000).delay(2000).show(1000);

注：延迟执行方法，有两个参数：

延迟时间

延迟执行效果的队列名称

jQuery——入门（二）动画相关推荐

2021/10/31 前端开发之JavaScript+jQuery入门第十二章jQuery事件与动画
目录 1.jQuery中的事件 1.1 事件的组成 1.2 基础事件 2.载入事件 3.鼠标事件 4.键盘事件 5.浏览器事件 6.表单事件 7.绑定事件 8.移除事件 9.复合事件 10.控制元素显 ...
jQuery入门、选择器、事件、静态方法、动画
目录第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuer ...
jQuery复习-(jQuery入门,jQuery语法(DOM),jQuery动画)
jQuery入门 jQuery的概述 jQuery是概念: jQuery是一个第三方框架(库) 框架:别人写好的js代码文件框架好处:复制粘贴提高代码效率 jQuery的作用: DOM操作(主要) ...
JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
jQuery——入门（一）JQuery的简介与基本选择器的使用
JQuery入门(一)-- 基本简介与基本选择器的使用一.jQuery简介 jquery是2006年1月由美国人John Resig在纽约barcamp发布,目前已经成为辅助javascript开发 ...
jQuery入门实操-css操作，鼠标点击事件，页面计算器
前言本文是学习jQuery中的一些实践,是jQuery入门的实操案例.更多语法可参考w3school的jQuery参考手册 jQuery是一个快速.简洁的JavaScript框架,是继Prototy ...
JQuery 入门 - 附案例代码
文章目录预备知识与后续知识及项目案例为什么要学jquery 体验jquery的使用 jquery到底是什么 jquery的版本问题 jquery的入口函数 jq对象和dom对象(重要) jquer ...
帝君级别纯手写原创 jQuery入门笔记
帝君级别纯手写原创 jQuery入门笔记广治君今天下午整理了一下jQuery的入门学习思路,以及学习内容一.学习jQuery的目的为什么要学习jQuery,低程度的一定是你在学前端或者后端, ...
jQuery入门基本语法选择器
文章目录一.了解什么是jQuery&为什么要学jQuery? 二.jQuery的基本语法? 三.jQuery如何使用? 四.jQuery的选择器? 五.推荐使用开发工具:HBuilder X ...

jQuery——入门（二）动画

jQuery——入门（二）动画相关推荐

最新文章

热门文章