当尝试使用Jani动画时，div更改为错误的位置

Question

I'm a bit new to Javascript and jQuery and I'm having trouble animating something correctly. I'm trying to make a <div> move just a few pixels to the left when hovering over something, but when you hover over the thing, the Div immediately moves all the way to the left side of the screen.

Here the jQuery code:

$(window).ready(function() {
    $(".article").hover(function() {
        $(".suddenlyNinjas").animate({"left": "-5px"}, "slow");
    });
});

Also here is the CSS of the div I'm trying to move:

.suddenlyNinjas
{
    background-color:black;
    height:50px;
    width:125px;
    position:absolute;
    z-index:2;
    top:350px;
}

Answer 1

Animate uses it's absolute position if I recall. So instead of moving it over -5 pixels from it's current position, it's moving it to -5px of the entire window.

Have you tried putting a div with position:relative around the suddenlyNinjas div?

If that doesn't work, just subtract 5 from it's current position to get the new target position you want.