没动画看看函数逻辑通不通一步步排除

看看有啥不一样

我也遇见过这种情况，根据我的观察应该和鼠标的位置有关。事件判断的条件是a的mouseover，而a标签里有很多子标签，每个子标签都可以触发a的onmouseover事件。你可以在审查中通过对标签区域的观察来看看究竟是不是这样。。。。至于解决方案，我目前还没改出来

speed>0?Math.ceil(speed):Math.floor(speed);不对

speed=speed>0?Math.ceil(speed):Math.floor(speed);

有可能是你的运动框架有的地方写的不正确，你可以再检查一下你的框架

  //停止检测        

    if (icur != json[attr]) {     //这个位置判断不是“！==”而是“！=”

            flag = false;       

      }

if (attr == 'opacity') {
    obj.style.filter = 'alpha(opacity:' + (iCur + speed) + ')';//此处透明度要兼容ie
    obj.style.opacity = (iCur + speed) / 100;
}

注释为“检测停止”那段代码，把if里的return去掉

你这是的top跨度太大了 所以会显示速度慢

#move{

width: 300px;

border:1px solid #ccc;

margin:0 auto;

padding:10px;

overflow: hidden;

}

#move a{

display: inline-block;

width: 58px;

height: 25px;

border:1px solid #ddd;

border-radius: 3px;

text-align: center;

margin:10px 17px;

position: relative;

padding-top: 40px;

color: #9c9c9c;

font-size: 12px;

text-decoration: none;

line-height: 25px;

overflow: hidden;

}

#move a i{

position: absolute;

top: 20px;

left: 0;

display: inline-block;

width: 100%;

filter:alpha(opacity=100);

opacity: 1; 

}

#move a p{

margin-top: 0px;

}

#move a:hover{

color: #f00;

}

#move img {

border:none;

}

是因为改变top值 做事件,视觉上让你感觉转了一圈,其实没有,跟鼠标那个没什么关系

window.onload=function(){    
  var link=document.getElementById("link");
  var cir=document.getElementById("circle");
  link.onmouseover=function(){
    move(cir,{width:100,opacity:0},function(){
        move(cir,{top:50,opacity:100});
    });
  };
};
function move(obj,json,fn) {
   clearInterval(obj.timer);
   obj.timer=setInterval(function () {
       for(var attr in json){
      var flag=true;
      var cur=0;
      if(attr=='opacity'){
          cur=Math.round(parseFloat(getstyle(obj,attr))*100);
      }else{
        cur=parseInt(getstyle(obj,attr));
      }
      var speed=(json[attr]-cur)/8;
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      if(cur!==json[attr]){
          flag=false;        
      }
      if(attr=='opacity'){
          obj.style.filter='alpha(opacity:'+(cur+speed)+')';
        obj.style.opacity=(cur+speed)/100;
      }else{
        obj.style[attr]=cur+speed+"px";
      }
    }
    if(flag){
        clearInterval(obj.timer);
      if(fn){
          fn();
      }
    }
  },30);
}

//以下是老师封装的函数，其余的css代码自己写就好了

function startMove(obj,json,fn) {

/*

obj为要改变的元素对象

json为属性/值对，即要改变的属性和值。用于同步运动

fn为回调函数，用于设置链式运动

*/

// 首先清除定时器

clearInterval(obj.timer);

obj.timer=setInterval(function(){

flag=true;

//对于同时改变元素多个属性值的情况

for(var attr in json)

{

//获取属性值

var icur=0;   //初始化属性值为0

if(attr=="opacity")

{

//获取的透明度为小数（0-1），首先转化为百分制（0-100），然后四舍五入取整

icur=Math.round(parseFloat(getStyle(obj,attr))*100);

}else{

icur=parseInt(getStyle(obj,attr));

}

// 判断所有属性值是否都达到目标值，一个未达到，即为false

if(icur!=json[attr])

{

flag=false;

}

//设置属性改变的速度

var speed=0;

speed=(json[attr]-icur)/4;   //4为参数，可为任意值，越小改变速度越快

speed=speed>0?Math.ceil(speed):Math.floor(speed);  //取整

//改变属性值

if(attr=="opacity")

{

obj.style.filter="alpha(opacity:"+(icur+speed)+")";

obj.style.opacity=(icur+speed)/100;

}else{

obj.style[attr]=icur+speed+"px";

}

}

//待改变的属性值同时完成一次改变后，判断是否都达到目标值

if(flag)

{

clearInterval(obj.timer);

// 如果存在回调函数，则调用之

if(fn)

{

fn();

}

}

},30) 

}

// 获取css样式

function getStyle(obj,attr) {

if(obj.currentStyle)

{

return obj.currentStyle[attr];   //IE8

}else{

return getComputedStyle(obj,false)[attr];  //IE 9 10 11支持  别人测试

}

}

定时器里的变量要控制好，

1. clearInterval(timer)，应该是obj.timer
   

2. 调试看看动画过程是否正确取值和设置值

3. flag在里面的时候，外面的判断取不到flag的值，obj.timer关不掉。效果看起来当然一样，跟第一问差不多。
   

第8行，是this，不是$(this),你用js写的jquery

可以用webpack呀

同学，你要认真听讲啊！老师有解释很清楚的

this，指的是当前的a标签，也就是说，你鼠标移动到哪一个a标签，哪一个a标签才会有后续动作；而_this指的是当前a标签下的第一个i标签，也就是要做动画运动的那个图片所在的标签，为什么要用TagName？因为这样便于获取a标签下的i标签啊；如果你觉得像老师这样命名不好理解，你也可以把_this换成i也行，

var _this=this.getElementsByTagName('i')[0];
//this，即是当前鼠标移动到的a标签；
//_this，即是当前鼠标移动到的a标签下的第一个i标签；
//为什么代码后面要加索引呢？因为TagName获取的是数组，虽然本例中只有一个i标签，但还是得索引第一个i标签
showMove2(_this,{top:-40,opacity:0},function () {
//这里，就是能看到，做运动的是i标签，而不是整个a标签
_this.style.top=30+'px';
showMove2(_this,{top:3,opacity:100})

关键没图才是问题

可以去学习下js的闭包。

1.你的路径是不是对的 （最容易出错）2.看看你的图片名称打错没有  

<i>标签绝对定位后，脱离了标准文档流，所以padding-top只会影响P标签的文字

老哥.

obj.style[attr] = icur+speed+'px';

你如果把这个speed设置为常数话,他就会在不断增加

你设置正的他就不断++,-25+8+8+8.....所以就一直往下面掉,同理设置负数时候,就一直向上面升.

而原本的

var speed = (json[attr]-icur)/8;

speed = speed > 0? Math.ceil(speed): Math.floor(speed);

速度是变速运动,前面做的运动和上面常数一样,但是随着距离越来越近,到后面速度越来越慢,就是速度趋向于0,因为距离接近了,因为

（icur对象样式当前的值大小）

obj.style[attr] = icur+speed+'px'; 

icu= obj.style[attr] = icur+speed+'px';

当icur == json[attr],就停止了运动..

= = 哎我也不会把自己所想表述的讲出来,就讲个大概的,如果你还理解不了,建议你去看下老师前面的关于speed = speed > 0? Math.ceil(speed): Math.floor(speed);这个的用法,

flag =true;加到定时器里面，函数作用域的事，去补一补。

这个就是

能不能具体点，只是根据这句话只能判断timer没有定义

将 flag=true;放在定时器里面，json循环外面就解决了

已自行解决。

startMove()函数有问题要把flag=true放在定时器里边for-in外边

是问为什么显示在i下面吗？因为是图片下面的行啊，用p分段。