jquery, mouseenter to move down image

Question

I am new to JS, I am hardworking to improve my skills with JS, so far everything went well, till now, I have to move the img in the nav , when mouse enters it moves down and when it leaves back up. https://www.youtube.com/embed/8qKRf0cg3Co

I have tried different things to get it done, but im stuck now. Now, when I moveover the img, it keeps going down and when I leave it wont be back in place.

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

Answer 1

You need to use marginTop in mouseleave not marginBottom

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