jQuery的CSS与animation的可见性

我有几个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); 

FadeIn工作 ，但fadeOut不起作用 。

现在，你可能会认为问题是最后的' 200 '，但是我将需要使用它作为延迟，因为淡出/可见性：隐藏在200ms之后的mouseleave事件中。

所以我的问题是：我怎样才能隐藏与animation隐藏作为一个fadeOut。

非常感谢

Answer 1

$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);

Answer 2

为什么要这么辛苦，而不是animation的CSS，你可以使用默认的淡入淡出function

 $('.drop1').fadeIn(200); $('.drop1').fadeOut(200); 

编辑

如果你想要淡出而不失高度。 你可以使用fadeTo（duration，opacity，[callback]）;

 $('.drop1').fadeTo(200, 0); 

检查这个例子： http : //jsfiddle.net/ufLwy/1/

Answer 3

我有类似的问题，这就是我最终做的事情。

 $.fadeToHidden = function ( selector, duration, complete ) { $.when( $( selector ).fadeTo( duration, 0 ) ).done( function(){ $( selector ).css('visibility', 'hidden') complete(); }); } 

我这样做的原因是

1. fadeIn（）/ fadeOut（）使用'display'来显示元素的高度
2. fadeTo不会影响“可见性”，所以虽然元素在视觉上隐藏不透明：0用户仍然能够交互（即点击）不可见元素
3. animate（）是asynchronous的，所以在最后链接CSS并不能保证它在animation完成时运行。 只有使用animation返回的Deferred对象（$ .when（）/ $ .done（））才能保证在所有animation完成后应用css。

编辑或者，您可以应用到“可见性：隐藏”到每个单独的元素，一旦其各自的animation完成。 这对于select更大的元素组可能稍微快一点，因为您只查询一组元素的DOM。

 $.fadeToHidden = function ( selector, duration, complete ) { $.when( $( selector ).fadeTo( duration, 0 , function(){ $(this).css('visibility', 'hidden'); } ) ).done( complete ); } 

Answer 4

我有类似的问题，我解决这个问题：

淡入：

 $("#id").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0},200); 

淡出：

 $("#id").animate({opacity: 0.0}, 200, function(){ $("#"+txtid).css("visibility","hidden"); }); 

正如你所看到的，一旦animation结束，我就隐藏div #id。 我希望现在还不迟

Answer 5

我知道这是一个旧的post，但我遇到了类似的情况，这就是我最终做的

 $(".drop1").css("visibility", "visible").show().fadeOut(5000); 

Answer 6

 .drop1{ opacity: 0.0; } $('.drop1').fadeTo( "slow" , 1.0);