<html>
<head>
<meta charset="utf-8">
<title>suface js判断css动画是否结束</title>
</head>
<body>
<p>一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持。<br> </p>
<style type="text/css">
.sample {
width: 200px
height: 200px
border: 1px solid green
background: lightgreen
opacity: 1
margin-bottom: 20px
transition-property: opacity
/*transition-duration: .5s*/
transition-duration:3s
}
.sample.hide {
opacity: 0
}
</style>
<div class="sample">css3动画过度慢慢隐藏（transition-duration:3s）</div>
<p><button onclick="this.style.display='none'startFade()">慢慢消退，检测结束事件</button></p>
<script>
(function() {
var e = document.getElementsByClassName('sample')[0]
function whichTransitionEvent(){
var t,
el = document.createElement('surface'),
transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t]
}
}
}
var transitionEvent = whichTransitionEvent()
transitionEvent && e.addEventListener(transitionEvent, function() {
alert('css3运动结束！我是回调函数，没有使用第三方类库！')
e. removeEventListener(transitionEvent,arguments.callee,false)//销毁事件
})
startFade = function() {
e.className+= ' hide'
}
})()
</script>
</body>
</html><br><br>//兼容性 详情
1、在你的点击事件中加上一个判断，假设产生动画效果目标的是aa这个节点，那么你要加上这个判断if(!$(aa).is(:animated)){
//执行你的操作
}
他会确保你的动画只会在上一个动画结束后才能产生 ，可以保持动画的完整性，但是连续点击时会有反映迟钝的感觉
2、$(aa).stop(true,false).animate({},1000)
这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画，会造成动画脱节不太美观，但是反应迅速
说到这里我们解释下stop（）这个函数的用法。
stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。
stop在新版jQuery中添加了2个参数：
第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；
第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候
3、第三种方法应用就需要设置一个判断是否处于动画的标志，一般是一个点击事件执行N多个步骤的动画之后然后跳到下一个动画。
var flag = false
function aa(){
if(flag) return//这里指当这个标志flag为真的时候，直接返回，不执行当前的这个动画。
flag=true//这里是在执行这个动画的最开始的时候把标志flag设置为真，在这个动画没执行完之前这个值一直为真，当下次运行这个函数的时候，由于flag值为真，也不会执行。必须等到这个函数执行完之后才会再次执行这个动画。
……………….
………………..
………………..
$(“aa”).animated({“left”:”100″},1000,function(){
………………….
flag=false//回到最初始状态，也是也表示这一轮动画执行完毕。
})
}
因为FLASH动画，有可能是很多影片剪辑的嵌套，如果光靠程序完成判断，那是不靠谱的。建议动画师最后执行依下JS的方法，实现告知功能。
as3的话
if (ExternalInterface.available)
{
ExternalInterface.call('JS方法的名字','参数')
}
例如：
if (ExternalInterface.available)
{
ExternalInterface.call('alert','hi完成了')
}
建议封装下程序：
/**
* 调用JS方法
* @param _Fun 方法名称
* @param _str 参数
* @example
* toJS('alert','成功调用JS方法')
*/
public static function toJS(_Fun:String, _str:String=''):void
{
trace('==============:', _str)
trace('ExternalInterface.available:', ExternalInterface.available)
if (ExternalInterface.available)
{
ExternalInterface.call(_Fun, _str)
}
}
