javascript - 如何为以下 jQuery 动画添加轻微的滑入/滑出效果？

Question

我使用以下代码在 hover 上显示一个元素，并在鼠标离开时隐藏它:

$(".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。如何实现？

Answer 1

您应该从左到右和从右到左为它的 margin-left 属性设置动画。

Fiddle

jQuery:

$(".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'
    });
});

CSS:

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