如一楼所说，if放在外面，它只执行一次，而且执行的时候op.offsetWidth应该还没>100，js是顺序执行下来的，也就是说，你setInterval执行一次的时候，就接下去执行if了，但当setInterval执行第二次的时候，并不会再执行if，而是重复得执行slide，就是酱紫。
当然，你原来那样写，直接在外面清除定时器，一点问题没有，只不过你需要加个

op.onmouseout=function(){
    //鼠标移出时，重新开启定时器
    timer=setInterval(slide,30);
}

还有一个问题很重要，在做条件判断的时候，要把if跟else写完整，true的时候才clearInterval，false才op.style.width=op.offsetWidth+2+"px";

function slide(){
     if(op.offsetWidth>100){
         clearInterval(timer);
     }else {
         op.style.width=op.offsetWidth+2+"px";
     }
}

if放在外面的话，执行过一次就不会再执行啦，根本就不会重新获取op的offsetWidth，这样的话就永远不会清除定时器，但是放在里面的话，定时器每次调用slide的时候就会重新获取offsetWidth，这样当对应的值大于100的时候自然就会清除啦

setInterval是一个异步操作。实际上当offsetWidth没大于100的时候就执行if了。

ps: 有个答案说if没执行的简直误人子弟！

get*byId不是动态实时更新，并且setInterval相当于多开了一个线程，会顺序执行，执行到if的时候新开的线程还没有到达判断结果