Исчезновение видимости элемента с помощью 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

Это то, что сработало для меня (основываясь на @ ответ Алана )

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