使用jQuery淡化元素的可见性

Question

我在寻找JQuery的可见性参数方面遇到了一些麻烦。

基本上...下面的代码什么也没做。

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

使用 animate 代码没有问题（我已将 visibility 替换为 fontSize 并且正常运行）。我只是无法找到与 CSS 中 "visibility" 相对应的正确参数名称。

- Jieren

---

-1 阿姨，我想在你提问之前，你可以先看一些教程或jQuery文档，可能会更好地表达你的问题并说明你的目标，就像erenon建议的那样。 - Michiel

根据代码示例，他很可能希望从不可见状态渐变为可见状态。 - jrista

Answer 1

你可以将透明度设置为0.0（即“不可见”），可见性设置为visible（使透明度相关），然后将透明度从0.0动画到1.0（淡入）：

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

因为你将不透明度设置为0.0，即使设置为“visible”，它也是不可见的。通过不透明度动画，您可以实现淡入效果。

当然，您也可以使用.show()或.fadeTo()动画。

编辑：Volomike是正确的。CSS当然指定opacity取值范围在0.0和1.0之间，而不是在0到100之间。已修复。

- Alan Plum

---

在使用Google Chrome测试时，这个内容略有错误。最终的不透明度应该是1。为了实际看到效果，你需要设置一个持续时间。所以，代码应该类似于：$('ul.load_details').css({opacity: 0, visibility: "visible"}).animate({opacity: 1},3000); - Volomike

Answer 2

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

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

或者您想使用动画来显示/隐藏元素（当然这是没有意义的，因为它不会淡出）：

$('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/

- Michiel

Answer 3

你无法动画化 visibility 属性。它要么可见，要么不可见（即使是1%的透明度也被视为“可见”）。这就像半存在一样，没有意义。最好通过.fadeTo()等方法来动画化透明度。

- Sampson

Answer 4

这可能会有所帮助：

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

- Shadi Almosri

Answer 5

这是我成功的方法（基于@Alan的答案）

        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的可见性设置为隐藏之前等待完成。 否则，在动画过程中如果设置为隐藏，则淡出效果将不会发生，因为它立即隐藏。

或者，您可以使用更简单、更清晰的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" });
        }

- Ray