jquery，mouseenter向下移动图像

Question

我是JS新手，我努力提高自己的JS技术，到目前为止一切进展顺利，直到现在，我必须在导航中移动img，当鼠标移动到它时移动下来，当它离开了。 https://www.youtube.com/embed/8qKRf0cg3Co

我已经尝试过不同的事情来完成它，但我现在卡住了。 现在，当我移动IMG时，它会一直下降，当我离开时它不会回到原位。

$(document).ready(function(){ $('.foto').mouseenter(function() { $(this).animate({marginTop: '+=50'}, 200); }); $('.foto').mouseleave(function(){ $(this).animate({marginBottom: '-=50'}, 200); });

Answer 1

您需要使用marginTop在mouseleave不marginBottom

$(document).ready(function(){ 
    $('.foto').mouseenter(function() { 
     $(this).animate({marginTop: '+=50'}, 200); 
    }); 
    $('.foto').mouseleave(function(){ 
     $(this).animate({marginTop: '-=50'}, 200); 
     //    --^-- change here 
    }); 
});