KISSY基础篇乄KISSY之Node（2）

KISSY之Node（2）

今日任务：学习Node模块有关动画效果的方法.

在学习Anim模块之前，先看看Node模块里有关动画效果的方法的实现。查看相应的API 文档你会发现一些有关动画效果的方法：

· show()：当前节点列表元素以动画效果显示。参数：speed (number) – 单位秒, 动画持续时间, 不设置无动画；callback (function) – 每个动画结束后回调函数。

· hide()：当前节点列表元素以动画效果隐藏。参数如上。

· toggle()：当前节点列表元素为显示时动画效果隐藏, 否则动画效果显示。参数如上。

· fadeIn()：当前节点列表元素以渐隐效果显示。参数：speed (number) – 单位秒, 动画持续时间, 不设置无动画；callback (function) – 每个动画结束后回调函数。easing(String)–动画平滑函数

· fadeOut()：当前节点列表元素以渐隐效果隐藏。参数如上。

· fadeToggle()：当前节点列表元素为显示时, 切换显示或隐藏, 且动画效果为渐隐。参数如上。

· slideUp()：当前节点列表元素从下到上隐藏。参数：speed (number) – 单位秒, 动画持续时间, 不设置无动画；callback (function) – 每个动画结束后回调函数。easing(String)–动画平滑函数

· slideDown()：当前节点列表元素从上到下滑动显示。参数如上。

· slideToggle()：当前节点列表元素为显示时, 切换显示或隐藏, 且动画效果为滑动展开折叠。参数如上。

说明：实践时，1.40版本的对以上方法实现室友缺陷的。

toggle：不能有参数和回调函数

slideToggle、fadeToggle ：不可用

· animate()：在当前节点列表上开始动画。

var node=KISSY.all(".foo");

node.animate(...);

相当于：

KISSY.query(".foo").each(function(n){

newKISSY.Anim(n,...).run();

});

此方法在下一节向大家介绍。

下面直接上实例：

(1)day-8.html代码：

<div class="box" id="anim_slide">slideUp/slideDown 动画</div>

<div class="box" id="anim_fade">fadeIn/fadeOut 动画</div>

(2)day-8.css代码：

.box {

width: 160px;

height: 160px;

background: #AABBCC;

}

(3)day-8.js代码：

KISSY.use("node,button", function (S, Node, Button) {

var anim_show = Node.one("#anim_show"),

anim_slide = Node.one("#anim_slide"),

anim_fade = Node.one("#anim_fade");

var demo_show = new Button({

content: "show/hide",

render: "#demo_show"

});

demo_show.render();

demo_show.on("click", function () {

anim_show.toggle();

});

var demo_slide = new Button({

content: "show/hide",

render: "#demo_slide"

});

demo_slide.render();

demo_slide.on("click", function () {

if (anim_slide.css("display") === "none") {

anim_slide.slideDown(2,function(){alert("动画已完成！");});

} else {

anim_slide.slideUp(2);

}

});

var demo_fade = new Button({

content: "show/hide",

render: "#demo_fade"

});

demo_fade.render();

demo_fade.on("click", function () {

if (anim_fade.css("display") === "none")

anim_fade.fadeIn(2,function(){alert("动画已完成！");});

else

anim_fade.fadeOut(2);

});

(4)效果图：

KISSY基础篇乄KISSY之Node（2）相关推荐

KISSY基础篇乄KISSY之DOM（1）
KISSY之DOM(1) 今日任务:了解学习DOM的基础知识以及学习拆合菜单实例 KISSY的DOM模块的子模块和方法众多,但又很重要,最好的情况是全部熟练掌握,当然一开始学是不可能全部记住DOM的方 ...
KISSY基础篇乄KISSY简介
KISSY简介今日任务:了解学习有关Kissy的一些知识,以便于后续的学习一.相约KISSY,必先了解 KISSY 是一款跨终端.模块化.高性能.使用简单的 JavaScript 框架.除了完备的 ...
KISSY基础篇乄KISSY之HelloWorld
KISSY之HelloWorld 今日任务:使用kissy实现简单的hello World! 一.新建Kissy测试项目打开STS,File->StaticWeb Project,命名其Pro ...
KISSY基础篇乄KISSY之Node（1）
KISSY之Node(1) 今日任务:学习Node模块,对拆合菜单实例代码进行优化重构. 前面我们分别讲解了DOM 和Event模块,那时是按照使用什么模块就引用什么模块的原则编写代码的.同时,我们也 ...
KISSY基础篇乄KISSY之Event
KISSY之Event事件今日任务:了解学习Event事件的基础知识 Event 模块是KISSY最重要的模块之一,他包含自定义事件机制.事件对象封装.DOM事件封装.面向多终端的事件行为统一.下辖 ...
KISSY基础篇乄KISSY之Seed
KISSY之Seed 今日任务:了解Kissy的模块载入机制首先恭喜你已经成功使用kissy想世界打了个招呼,不过这只是刚起步,咱们还有很多地方需要学习.在本节咱们就推开kissy的大门,看看房间里 ...
KISSY基础篇乄KISSY之IO（2）
第14天:KISSY之IO(2) 今日任务:创建Maven Project并学习IO模块. 这一节我们主要来看一下IO模块里的一些方法. 一.Maven Project (1)创建mavenproje ...
KISSY基础篇乄KISSY之DOM（2）
KISSY之DOM(2) 今日任务:深入学习DOM知识及进一步完善拆合菜单实例在上一篇的教程中,明河使用KISSY.DOM的常用方法制作了一个拆合菜单,同时也演练到了几个常用方法,比如addClas ...
KISSY基础篇乄KISSY之IO前奏
KISSY之IO前奏今日任务:了解学习IO模块之前必备知识. 在学习Kissy的IO之前,咱们先来了解下ajax,http,json等知识,这些是学习IO模块的必备知识.这里只是给出了一些概念性的介 ...

KISSY基础篇乄KISSY之Node（2）

KISSY之Node（2）

KISSY基础篇乄KISSY之Node（2）相关推荐

最新文章

热门文章