Угасающая видимость элемента с помощью jQuery

Ответ 1

Вы можете установить непрозрачность 0.0 (т.е. "невидимая" ) и видимость на видимую (чтобы сделать непрозрачность релевантной), а затем оживить непрозрачность от 0.0 до 1.0 (чтобы ее угасить):

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

Поскольку вы устанавливаете непрозрачность 0.0, она невидима, несмотря на то, что она установлена ​​на "видимый". Анимация с непрозрачностью должна давать вам затухание, которое вы ищете.

Или, конечно, вы можете использовать анимации .show() или .fadeTo().

ИЗМЕНИТЬ: Воломике правильно. CSS, конечно, указывает, что opacity принимает значение от 0,0 до 1,0, а не от 0 до 100. Исправлено.

Ответ 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/

Ответ 3

Вы не можете анимировать visibility. Либо что-то видимо, либо нет (событие 1% непрозрачных элементов "видимо" ). Это похоже на наполовину существующее - не имеет смысла. Вероятно, вам лучше не оживлять непрозрачность (через .fadeTo() и т.д.).

Ответ 4

Это может помочь:

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

Ответ 5

Это то, что сработало для меня (на основе @Alan 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" });
        }