我看完KISSY代码后做了个鼠标效果,鼠标经过产品时另一个DIV从左上角跑出来覆盖鼠标经过的那个DIV,当鼠标离开DIV坐标区域就以动画的方式结束掉跑出来那个层。现在问题是不知道具体要怎样做才能在动画播放完成后执行一个函数,因为动画播放完后我还要对一些DIV的属性进行控制,所以当动画播放完成后就要调用一个函数,看了半天这个地址:
http://docs.kissyui.com/docs/html/api/core/anim/index.html?highlight=anim#anim.Anim.Events.complete
这里面只有一个
Events Detail
complete
complete ()
动画结束后, 触发该事件.
啥实例代码都没用,帮朋友做淘宝网店的代码,所以只能用KISSY,KISSY文档根本没有动画播放完成后调用函数的示例代码,所以来CSDN请教下大家具体要如何做才能实现?下面是我做的JS文件,按淘宝规定要用KISSY才行,JQUERY不受支持。
KISSY.use('gallery/layer-anim/1.0/, dom, event', function (S, LayerAnim, DOM, Event) {
var els = DOM.query("div.overitem");
var els2 = DOM.query("div.overitem2");
var se = S.Event;
for (var i = 0; i < els.length; i++) {
se.on(els[i], 'mouseenter', function () {
var left1 = this.offsetLeft;
var top1 = this.offsetTop;
var label = parseInt(this.getAttribute("dir")) - 1;
new LayerAnim(
{
node: els2[label],
from: {
width: 0,
height: 0,
left: left1,
top: top1
},
to:
{
width: 200,
height: 50,
left: left1,
top: top1
},
duration: 0.5
, align: "sequence" }).run();
els2[label].setAttribute("lang", "opened"); });
getsss = function () { alert("动画播放结束"); }
els2[i].onmouseleave = function () {
getsss = function () { alert("动画播放结束"); }
var left1 = this.offsetLeft;
var top1 = this.offsetTop;
var label = parseInt(this.getAttribute("dir")) - 1;
if (els2[label].getAttribute("lang") == "opened") {
els2[label].setAttribute("lang", "closed");
new LayerAnim(
{
node: els2[label],
from: {
width: 200,
height: 50,
left: left1,
top: top1
},
to:
{
width: 0,
height: 0,
left: left1,
top: top1
},
duration: 0.5
,complete:getsss;
}).run();
getsss = function () { alert("动画播放结束"); }
}
}
se.on(els[i], 'mouseleave', function (event) {
var isAT = true;
var se = S.Event;
if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
var x = event.clientX;
var y = event.clientY;
var left = this.getBoundingClientRect().left;
var top = this.getBoundingClientRect().top;
var w = this.offsetWidth;
var h = this.offsetHeight;
if (x <= left || y <= top || x >= (left + w) || y >= (top + h)) {
isAT = false;
}
}
else if (this.contains(event.toElement) == false) {
isAT = false;
} if (!isAT) {
var left1 = this.offsetLeft;
var top1 = this.offsetTop;
var label = parseInt(this.getAttribute("dir")) - 1;
if (els2[label].getAttribute("lang") == "opened") {
els2[label].setAttribute("lang", "closed");
new LayerAnim(
{
node: els2[label],
from: {
width: 200,
height: 50,
left: left1,
top: top1
},
to:
{
width: 0,
height: 0,
left: left1,
top: top1
},
duration: 0.5
, complete: getsss
}).run();
}
}
});
}
});getsss 这个函数在动画播放完后无法执行,淘宝参数里面写的complete这个参数KISSYLayerAnim anmin LayerAnimanimcomplete
http://docs.kissyui.com/docs/html/api/core/anim/index.html?highlight=anim#anim.Anim.Events.complete
这里面只有一个
Events Detail
complete
complete ()
动画结束后, 触发该事件.
啥实例代码都没用,帮朋友做淘宝网店的代码,所以只能用KISSY,KISSY文档根本没有动画播放完成后调用函数的示例代码,所以来CSDN请教下大家具体要如何做才能实现?下面是我做的JS文件,按淘宝规定要用KISSY才行,JQUERY不受支持。
KISSY.use('gallery/layer-anim/1.0/, dom, event', function (S, LayerAnim, DOM, Event) {
var els = DOM.query("div.overitem");
var els2 = DOM.query("div.overitem2");
var se = S.Event;
for (var i = 0; i < els.length; i++) {
se.on(els[i], 'mouseenter', function () {
var left1 = this.offsetLeft;
var top1 = this.offsetTop;
var label = parseInt(this.getAttribute("dir")) - 1;
new LayerAnim(
{
node: els2[label],
from: {
width: 0,
height: 0,
left: left1,
top: top1
},
to:
{
width: 200,
height: 50,
left: left1,
top: top1
},
duration: 0.5
, align: "sequence" }).run();
els2[label].setAttribute("lang", "opened"); });
getsss = function () { alert("动画播放结束"); }
els2[i].onmouseleave = function () {
getsss = function () { alert("动画播放结束"); }
var left1 = this.offsetLeft;
var top1 = this.offsetTop;
var label = parseInt(this.getAttribute("dir")) - 1;
if (els2[label].getAttribute("lang") == "opened") {
els2[label].setAttribute("lang", "closed");
new LayerAnim(
{
node: els2[label],
from: {
width: 200,
height: 50,
left: left1,
top: top1
},
to:
{
width: 0,
height: 0,
left: left1,
top: top1
},
duration: 0.5
,complete:getsss;
}).run();
getsss = function () { alert("动画播放结束"); }
}
}
se.on(els[i], 'mouseleave', function (event) {
var isAT = true;
var se = S.Event;
if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
var x = event.clientX;
var y = event.clientY;
var left = this.getBoundingClientRect().left;
var top = this.getBoundingClientRect().top;
var w = this.offsetWidth;
var h = this.offsetHeight;
if (x <= left || y <= top || x >= (left + w) || y >= (top + h)) {
isAT = false;
}
}
else if (this.contains(event.toElement) == false) {
isAT = false;
} if (!isAT) {
var left1 = this.offsetLeft;
var top1 = this.offsetTop;
var label = parseInt(this.getAttribute("dir")) - 1;
if (els2[label].getAttribute("lang") == "opened") {
els2[label].setAttribute("lang", "closed");
new LayerAnim(
{
node: els2[label],
from: {
width: 200,
height: 50,
left: left1,
top: top1
},
to:
{
width: 0,
height: 0,
left: left1,
top: top1
},
duration: 0.5
, complete: getsss
}).run();
}
}
});
}
});getsss 这个函数在动画播放完后无法执行,淘宝参数里面写的complete这个参数KISSYLayerAnim anmin LayerAnimanimcomplete
http://gallery.kissyui.com/layer-anim/1.0/guide/index.html?spm=0.0.0.0.w4rKAP
事件 end() 动画播放完毕时,触发该事件。
有一个文档是complete参数调用,这个又是end()事件,不知道要怎么玩才行
els2[i].onmouseleave=function()
{
var left1=this.offsetLeft;
var top1=this.offsetTop;
var label= parseInt(this.getAttribute("dir"))-1;
if(els2[label].getAttribute("lang")=="opened")
{
els2[label].setAttribute("lang","closed");
//alert(label);
new LayerAnim(
{
node: els2[label], // 动画DOM节点,可使用“选择符”(支持的选择符请参考KISSY DOM文档)或原生DOM节点
from:{
width:200,
height:50,
left: left1,
top: top1
},
to: // 动画结束值,即动画结束时的CSS属性值
{
width:0,
height:0,
left: left1,
top: top1
},
duration: 0.5// 动画时长(单位:秒)
}).run(); // 播放动画
setTimeout("getsss('"+label+"')",500);;
}
}
complete: getsss
这样也试过了,没用,函数写到全局或者里面都不行,淘宝有个例子,他自己就可以KISSY.use("anim,node,button",function(S,Anim,Node,Button){
//KISSY 1.2 以前可通过 var Node=S.Node ; var Anim=S.Anim
var anim = Anim(
'#test1',
{
'background-color':'#fcc',
//'border': '5px dashed #999',
'border-wdith':'5px',
'border-color':"#999999",
'border-style':"dashed",
'width': '100px',
'height': '50px',
'left': '900px',
'top': '285px',
'opacity': '.5',
'font-size': '48px',
'padding': '30px 0',
'color': '#FF3333'
},5,
'bounceOut',function(){
alert('demo1 结束');
}); var b = new Button({
content: "开始动画"
});
b.render();
b.on("click", function() {
anim.run();
});
});他里面加了一个结束执行的函数
function(){
alert('demo1 结束');
}
他就可以,我加到代码就不会执行,程序反而还报错了,不知道是不是版本问题,
alert(S.DOM.text(ev.currentTarget));
alert(S.DOM.text(ev.target));
})难道要这样才能监听动画新实例的End事件?
比如:
var flashOBJ=new LayerAnim(
{
node: els2[label], // 动画DOM节点,可使用“选择符”(支持的选择符请参考KISSY DOM文档)或原生DOM节点
from:{
width:0,
height:0,
left: left1,
top: top1
},
to: // 动画结束值,即动画结束时的CSS属性值
{
width:200,
height:50,
left: left1,
top: top1
},
duration:0.5 // 动画时长(单位:秒)
,align: "sequence"
});
flashOBJ.run();Event.add(flashOBJ,'End',function(ev){
alert('flash播放完毕');
})
这样可以吗?
flashOBJ.on("end",function(ev)
{
alert(ev+" has been played");
});