Question

我用js改top 用了css3过渡属性 过渡时间为一秒 鼠标放上去div的top减少 拿下来top增加

但是如果在mouseover过度的时候 我mouseout了，它就会立马停止mouseover 然后mouseout 导致div一直下沉 有什么方法强制mouseover完了才mouseout ，新手求解，查了些资料不知道怎么办了。。。。

下面部分代码
#one div{
transition: left 2s ,top 1s;

}

jq
function upup(){

$("#one div").mouseover(function(){
//alert($(this).css("top"));
var temp = $(this).css("top");
temp=parseInt(temp)-30;
//alert(temp);
$(this).css("top" , temp);
});
$("#one div").mouseout(function(){
var temp = $(this).css("top");
temp=parseInt(temp)+30;
//alert(temp);
$(this).css("top" , temp);

});
}

Answer 1

不知道你要实现什么效果。你的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')
    })
})()

Answer 2

建议试一试css的hover属性试一试，直接使用css比使用js好