javascript - 尝试使用 Jquery 制作动画时 Div 更改到错误位置

Question

我对 Javascript 和 jQuery 有点陌生，在正确制作动画时遇到问题。我正在尝试制作 <div>将鼠标悬停在某物上时，仅向左移动几个像素，但是当您将鼠标悬停在某物上时，Div 会立即一直移动到屏幕的左侧。

这里是 jQuery 代码:

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

这也是我要移动的 div 的 CSS:

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

Answer 1

如果我没记错的话，Animate 使用它的绝对位置。因此，它不是将其从当前位置移动超过 -5 像素，而是将其移动到整个窗口的 -5 像素。

你有没有尝试过在suddenNinjas div周围放置一个带有position:relative的div？

如果这不起作用，只需从当前位置减去 5 即可得到您想要的新目标位置。