jquery, mouseenter 下移图片

Question

我是 JS 新手，我正在努力提高我的 JS 技能，到目前为止一切顺利，直到现在，我必须在 nav 中移动 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

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

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

jquery, mouseenter 下移图片

jquery, mouseenter to move down image

javascript

jquery

image

move