<style type="text/css">
*{margin: 0padding: 0}
.top{width: 100%height: 100pxbackground: greenyellow}
.flex{display: flex}
.left{width: 200pxbackground: orangered}
.right{flex-grow: 1background: blue}
</style>
样式二： css2
<style type="text/css">
*{margin: 0padding: 0}
.top{width: 100%height: 100pxbackground: greenyellow}
.left{width: 200pxbackground: orangeredfloat: left}
.right{margin-left: 200pxbackground: blue}
</style>
<body>
<div class="top">
<h1>头</h1>
</div>
<div class="flex">
<div class="left">
<h1>左边</h1>
<h1>左边</h1>
<h1>左边</h1>
<h1>左边</h1>
</div>
<div class="right">
<h1>右边</h1>
<h1>右边</h1>
<h1>右边</h1>
<h1>右边</h1>
</div>
</div>
</body>
不知道你要实现什么效果。你的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')
})
})()
