怎么解决这个缓动问题：当鼠标不停在3,4按钮上来回移动时，图片切换颤动问题。。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
div {
position:relative;
width:200px;
height:150px;
overflow:hidden;
}
#move {
position:absolute;
top:-150px;
}
li {
list-style-type: none;
height:150px;
}
#butt li {
color: #FFF;
float: left;
height: 15px;
width: 15px;
border: 1px solid #F60;
background-color: #F93;
line-height:15px;
text-align:center;
margin-right:4px;
}
a {
display: block;
color:#FFF;
text-decoration:none;
}
*{
margin:0px;
padding:0px;
}
#butt{
position:absolute;
left:110px;
top:130px;
}
-->
</style>
</head><body>
<div>
<ul id="move">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
<ul id="butt">
<li onmouseover="go(0)"><a href="#">1</a></li>
<li onmouseover="go(1)"><a href="#">2</a></li>
<li onmouseover="go(2)"><a href="#">3</a></li>
<li onmouseover="go(3)"><a href="#">4</a></li>
</ul>
</div>
<script type="text/javascript">
function go(num){
var asd=$("move");
var begin=parseInt(getStyle("move","top"));
var change=-150*num-begin;
if(begin==num*(-150)){
return false;
}
var time=0;
var dur=500;
var t=setInterval(function tween() {
    asd.style.top=quad()+"px";
    time += 25;
if(time>dur) {
        clearTimeout(t);
    }
},25);
function quad() {
    return Math.pow(time/dur,2)*change + begin;
}
function getStyle(id,styleName){
    if($(id).currentStyle){
       return $(id).currentStyle[styleName];
    }else{
       var arr=$(id).ownerDocument.defaultView.getComputedStyle($(id), null);
       return arr[styleName];
    }
 }
function $(ob){
return document.getElementById(ob);}
}</script>
</body>
</html>O(∩_∩)O谢谢，就是当一个效果未完成的时候，鼠标移动到了另外一个button上，这个效果要立即停下来立即，不然会切换会颤抖。。

解决方案 »

  1.   

    <script type="text/javascript">
    var t;function go(num){
    clearInterval(t);var asd=$("move");
    var begin=parseInt(getStyle("move","top"));
    var change=-150*num-begin;
    if(begin==num*(-150)){
        return false;
        }
    var time=0;
    var dur=500;
    t=setInterval(function tween() {    asd.style.top=quad()+"px";
        time += 25;
        if(time>dur) {
            clearTimeout(t);
        }
    },25);
    function quad() {
        return Math.pow(time/dur,2)*change + begin;
    }
    function getStyle(id,styleName){
        if($(id).currentStyle){
           return $(id).currentStyle[styleName];
        }else{
           var arr=$(id).ownerDocument.defaultView.getComputedStyle($(id), null);
           return arr[styleName];
        }
     }
    function $(ob){
        return document.getElementById(ob);}
    }</script>