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
    });
});