淡入淡出元素，而不改变页面的布局

使用fadeIn和fadeOut时的正常行为是使用display属性 。 但是，这会更改页面的布局。

我如何使fadeIn和fadeOut不修改页面的布局？

Answer 1

也

而不是.fadeIn()你可以.animate({opacity:1})
而不是.fadeOut()你可以.animate({opacity:0})

Answer 2

你可以尝试这个fadeOut ：

 $("something here").fadeOut("slow", function() { $(this).show().css({visibility: "hidden"}); }); 

…这个用于fadeIn ：

 $("something here").hide().css({visibility: "visible"}).fadeIn("slow"); 

Answer 3

使用fadeTo ：

.fadeTo()方法为匹配元素的不透明度提供animation。 它类似于.fadeIn()方法，但该方法取消隐藏该元素，并始终褪色到100％不透明度。

持续时间以毫秒为单位; 较高的值表示较慢的animation，而不是较快的animation。 可以提供string'fast'和'slow'来分别指示200和600毫秒的持续时间。 如果提供任何其他string，则使用默认的400毫秒持续时间。 与其他效果方法不同， .fadeTo()要求显式指定duration 。

如果提供，animation完成后触发callback。

Answer 4

感谢10gler我的解决scheme，使用可见性来防止无形的button点击等

 //fadeIn $("#x") .css('visibility', 'visible') .fadeTo('fast', 1); //fadeOut $("#x") .fadeTo('fast', 0, function() { $(this).css('visibility', 'hidden'); }); 

Answer 5

综合以上的答案，这对我很好。 您可以根据自己的喜好更改animation时间。

fadeIn ：

  $('selector').animate({opacity:1, visibility:'visible'}, 200); 

fadeOut ：

  $('selector').animate({opacity:0, visibility:'hidden'}, 200); 

确保在开始时设置visibilty:'hidden'和opacity:0以避免在默认显示被隐藏的情况visibilty:'hidden'一次淡入的突然popup，否则应该没有关系。

  $('selector').css({opacity:0, visibility:'hidden'});