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