我有几个div放在彼此的下面,我使用css可见性来淡入淡出它们。我使用可见性的原因是这样div就不会移动位置。
对于淡入,我使用:
$('.drop1').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});
对于淡出,我使用:
$('.drop1').css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1.0})}, 200);
淡入可以,但淡出不可以。
现在,您可能认为问题出在最后一个',200',但我需要使用它作为延迟,因为淡出/可见性:隐藏是在200 ms后的鼠标离开事件上。
所以我的问题是:我怎样做才能用动画隐藏可见性来充当淡出。
非常感谢
6条答案
按热度按时间sf6xfgos1#
$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);
kse8i1jr2#
为什么使它如此困难,而不是动画css,你可以使用默认的淡入淡出功能
编辑
如果你想在不丢失高度的情况下淡出它,你可以使用fadeTo(duration, opacity, [callback]);
检查以下示例:http://jsfiddle.net/ufLwy/1/
a64a0gku3#
我也有类似的问题,这是我最后做的。
我这么做的原因是
fadeIn()
/fadeOut()
使用'display',其中F代表元素的高度fadeTo
不会影响visibility
,因此,虽然元素在视觉上以opacity:0隐藏,但用户仍然能够与不可见元素交互(即单击)。animate()
是异步的,因此在结尾链接CSS并不保证它会在动画完成时执行。只有使用动画传回的Deferred对象($.when()
/$.done()
),才能保证CSS会在***所有***动画完成后套用。EDIT或者,你可以在每个元素的动画完成后,对每个元素应用
visibility:hidden
。这对于选择更大的元素组可能会稍微快一些,因为你只需要在DOM中查询一次元素组。lvmkulzt4#
我也遇到过类似的问题,我是这样解决的:
要淡入:
要淡出:
正如您所看到的,动画结束后我隐藏了div“#id”。
yqkkidmi5#
我知道这是一个老职位,但我遇到了类似的情况,这就是我结束了这样做
ne5o7dgx6#