Question

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

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

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

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

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＆＃39;隐藏的可见性。否则，如果在动画过程中设置为隐藏，则不会发生淡出效果，因为它会立即隐藏。

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

使用jQuery淡化元素的可见性

5 个答案: