Javascript 如何在下面的jQuery动画中添加轻微的滑入/滑出效果？

我使用以下命令在

悬停

上显示一个元素，并在鼠标离开时将其隐藏：

$(".hidden").hover((function() {
  $(".hidden").stop(true, true).delay(100).animate({
    opacity: 1
  }, 100);
}), function() {
  $(".hidden").stop(true, true).delay(2000).animate({
    opacity: 0
  });
});

---

现在，我想添加一个微妙的滑入/滑出效果：它出现时从左向右，消失时从右向左。现在元素是

230px

淡入/淡出只能占用

30px

。如何做到这一点？

您应该从左到右和从右到左设置它的

左边距

属性的动画

jQuery： CSS:

---

.hidden

元素的CSS是什么？更好的是，一个工作演示怎么样？谢谢。使用

margin

是否比使用

width

更好？因为您说过----->“滑入/滑出效果：显示时从左向右，消失时从右向左”

$(".hidden").hover((function () {
    $(".hidden").stop(true, true).delay(100).animate({
        'opacity': 1,
        'margin-left': '0px'
    }, 100);
}), function () {
    $(".hidden").stop(true, true).delay(2000).animate({
        'opacity': 0,
        'margin-left': '-30px'
    });
});

.hidden {
    height: 40px;
    width: 230px;
    margin-left: -30px;
    opacity: 0;
    background-color: black;
}