使用jQuery淡化元素的可见性

我在查找JQuery的可见性参数时遇到了一些麻烦。

基本上…下面的代码什么都不做。

$('ul.load_details').animate({ visibility: "visible" },1000); 

有没有什么错误的animation代码（我用fontSizereplace了可见性，这很好，我似乎无法find正确的参数名称相当于“可视性”在CSS中。

Answer 1

您可以将不透明度设置为0.0（即“不可见”）和可见性（使不透明度相关），然后将不透明度从0.0增加到1.0（使其淡入）：

 $('ul.load_details').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}); 

因为您将不透明度设置为0.0，尽pipe设置为“可见”，但它是不可见的。 不透明度animation应该让你淡入淡出，你正在寻找。

或者，当然，您可以使用.show()或.fadeTo()animation。

编辑： Volomike是正确的。 CSS当然指定opacity取值在0.0到1.0之间，不在0到100之间。

Answer 2

也许你只是想显示或隐藏一个元素：

 $('ul.load_details').show(); $('ul.load_details').hide(); 

或者你想要使用animation来显示/隐藏元素（这并不意味着当然，因为它不会褪色）：

 $('ul.load_details').animate({opacity:"show"}); $('ul.load_details').animate({opacity:"hide"}); 

或者你想真的淡入像这样的元素：

 $('ul.load_details').animate({opacity:1}); $('ul.load_details').animate({opacity:0}); 

也许一个很好的教程将帮助你加快jQuery的速度：

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

Answer 3

你不能animation的visibility 。 要么是可见的，要么是不可见（事件1％不透明的项目是“可见的”）。 这很像一半存在 – 没有意义。 你可能更好的animation不透明度（通过.fadeTo（）等）。

Answer 4

这可能有助于：

 $(".pane .delete").click(function(){ $(this).parents(".pane").animate({ opacity: 'hide' }, "slow"); }); 

Answer 5

这是对我有用（基于@艾伦的答案 ）

  var foo = $('ul.load_details'); // or whatever var duration = "slow"; // or whatever if (foo.css('visibility') == 'visible') { foo.css({ opacity: 1 }).animate({ opacity: 0 }, duration, function () { foo.css({ visibility: "hidden" }); }); } else { foo.css({ opacity: 0 }).animate({ opacity: 1 }, duration).css({ visibility: "visible" }); } 

当foo元素可见时，然后慢慢地将不透明度改为零（通过animate ），然后等到设置foo的可见性被隐藏之前完成。 否则，如果在animation处理过程中设置为隐藏，那么淡出效果将不会发生，因为它是立即隐藏的。

或者，您可以使用更简单，更清晰的fadeTo（） ：

  var foo = $('ul.load_details'); // or whatever var duration = "slow"; // or whatever if (foo.css('visibility') == 'visible') { foo.fadeTo(duration, 0, function () { foo.css({ visibility: "hidden" }); }); } else { foo.fadeTo(duration, 1).css({ visibility: "visible" }); }