请教一个KISSY的LayerAnim动画播放结束后调用函数问题，谢谢！

[ekingxu]

我看完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这个参数

[ekingxu]

而这个说明文档又介绍了end事件： http://gallery.kissyui.com/layer-anim/1.0/guide/index.html?spm=0.0.0.0.w4rKAP 事件 end() 动画播放完毕时，触发该事件。 有一个文档是complete参数调用，这个又是end()事件，不知道要怎么玩才行

[ekingxu]

暂时这样解决下问题，播放动画时间做个定时器，定时执行，但是这样可能会存在不同步的问题，比如浏览器卡住了，动画没播放，这边就已经执行了定时器，希望有朋友能帮忙看下

getsss=function(label){els2[label].style.display="none";}
	

	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);;
			}
		}
	

[NANU-NANA]

加个onload()处理？ 等页面加载完后，在执行动画播放。

[ekingxu]

不是啊，我想要动画播放完成后执行一个函数，不是页面加载

[ekingxu]

有人能帮忙搞下吗？不知道end事件要怎么加上去

[一天要饭生活又开始啦]

duration: 0.5, complete: getsss

[一天要饭生活又开始啦]

getsss=function(label){els2[label].style.display="none";} 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);; } }定义成全局的试试

[ekingxu]

引用 6 楼 veryhunger 的回复:

duration: 0.5, 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 结束'); } 他就可以，我加到代码就不会执行，程序反而还报错了，不知道是不是版本问题，

[ekingxu]

Event.add('#demo6','click',function(ev){ 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播放完毕'); }) 这样可以吗？

[ekingxu]

搞定了，找了很多淘宝自己的事件类 flashOBJ.on("end",function(ev) { alert(ev+" has been played"); });