比较好的办法是把老网页和新网页的元素分别放置到一个层里，开始是现实老网页层，新网页层display设为none，不显示。
过度时使用新网页层盖住老网页层，过度效果就是新网页层盖住老网页层的过程效果。效果可以百度一下。当新网页层完全盖住老网页层时，把老网页层（这是页个元素）删除就可以了。
不知道你要实现什么效果。你的css属性和js代码并没有关系
我猜你要实现的效果用css是这样
#one div{top:0
position:absolute
transition: all 1s ease
}
#one div:hover{
top:30px
transition: all 1s ease
}
如果用js不要用mouseover和out,要用hover,可以这样写
(function() {var target = $('#one div'),
targetPosition = parseInt(target.css('top')),
lock
target.hover(function() {
lock = setTimeout(function() { //一般写在timeout里面，加一点延迟，防止鼠标不小心滑过就触发
target.animate({
top: targetPosition + 30
}, 1000, 'swing')
}, 100)
}, function() {
clearTimeout(lock)
target.animate({
top: targetPosition
}, 1000, 'swing')
})
})()
