jquery - 在图像内从右向左滑动 div

Question

我有一张图片，里面有一个 div，当鼠标悬停在图片上时会出现。我希望图像中的这个 div 的展示是动画的(慢的)，从右到左。

到目前为止，我已经从左到右得到了它，但我就是不知道如何从右到左做到这一点。

HTML

<div id="container">
    <div id="slider-div">
        some text
    </div>
    <img id="image" src="img.png">
</div>

jQuery

$("#image").hover(function(){
    $('#slider-div').animate({width:'toggle'},350);
});

CSS

#container {
    background: red;
    width: 200px;
    height: 200px;
    position: relative;
}

#image {
    height: 170px;
    width: 140px;   
}

#slider-div {
    background: green;
    width: 50px;
    height: 50px;
    position: absolute;
    display: none;
}

Answer 1

默认情况下，您的#slider-div 从左开始:0；位置。所以它会向右移动。如果你想让它离开，只需将你的#slider-div 放在开头，如 right:0;。