Увядающая видимость элемента с помощью 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, она невидима, несмотря на то установлен на «видимый». Анимация с непрозрачностью должна дать вам постепенное исчезновение, которое вы ищете.

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

EDIT: Volomike правильный. CSS, конечно, указывает, что opacity принимает значение от 0,0 до 1,0, а не от 0 до 100. Исправлено.

Answer 2

В этом . может помочь:

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

Answer 3

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

Answer 4

Может быть, вы просто хотите, чтобы показать или скрыть элемент:

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