使用jQuery淡化元素的可见性

Question

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

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

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

动画代码没有任何问题（我用 fontSize 替换了可见性，这很好。我似乎无法在 css 中找到与“可见性”等效的正确参数名称。

Answer 1

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

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

因为您将不透明度设置为 0.0，所以尽管设置为“可见”，但它是不可见的。不透明动画应该为您提供所需的淡入效果。

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

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

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/

Answer 3

您不能为visibility 设置动画。某些东西要么可见，要么不可见（事件 1% 的不透明项目是“可见的”）。这很像半存在 - 没有意义。您可能最好对不透明度进行动画处理（通过 .fadeTo() 等）。

Answer 4

这可能会有所帮助：

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

Answer 5

这对我有用（基于@Alan's answer）

        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" });
        }