javascript - jquery, mouseenter 下移图片

Question

我是JS新手，我正在努力提高我的JS技能，到目前为止一切都很顺利，到目前为止，我必须在nav中 move img，当鼠标进入时它会向下 move ，当它离开时会向上 move 。 https://www.youtube.com/embed/8qKRf0cg3Co

我尝试了不同的方法来完成它，但我现在陷入困境。现在，当我 move img 时，它会不断下降，当我离开时，它不会回到原位。

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

Answer 1

您需要在 mouseleave 中使用 marginTop 而不是 marginBottom

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