Zanikanie widoczności elementu za pomocą jQuery

Question

Mam problem ze znalezieniem parametru widoczności dla JQuery.

Zasadniczo ... poniższy kod nic nie robi.

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

Nie ma nic złego z kodem ożywionej (wymieniłem widoczność z fontSize i było w porządku. Po prostu nie może się znaleźć właściwą param name odpowiednik dla „widoczność” w CSS.

Answer 1

Można ustawić krycie na 0.0 (tj. „Niewidzialne”) oraz widoczność widoczny (aby krycie istotne), następnie animować krycie od 0,0 do 1,0 (zanikać ją):

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

Bo ustaw krycie na 0.0, to niewidoczne mimo ustaw "widoczny". Animacja nieprzezroczystości powinna dać ci efekt, którego szukasz.

Lub, oczywiście, można użyć animacji .show() lub .fadeTo().

EDYTOWANIE: Volomike jest poprawny. CSS oczywiście określa, że ​​opacity przyjmuje wartość od 0,0 do 1,0, a nie od 0 do 100. Naprawiono.

Answer 2

ten . może pomóc:

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

Answer 3

nie można animować visibility albo coś jest widoczny, czy nie jest (event 1% nieprzezroczyste przedmioty są „widoczne”) to tak jak połowa istniejących - nie ma sensu.. Prawdopodobnie lepiej animujesz przezroczystość (za pomocą .fadeTo() itp.)

Answer 4

Może jesteś po prostu chcą pokazać lub ukryć element:

$('ul.load_details').show(); 
$('ul.load_details').hide(); 

Czy chcesz aby pokazać/ukryć element, za pomocą animacji (to nie ma sensu, gdyż oczywiście nie znikną):

$('ul.load_details').animate({opacity:"show"}); 
$('ul.load_details').animate({opacity:"hide"}); 

Albo chcesz naprawdę blaknięcie w elemencie jak ten:

$('ul.load_details').animate({opacity:1}); 
$('ul.load_details').animate({opacity:0}); 

Może ładny tutorial pomóc dostać się do prędkości z jQuery:

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

Answer 5

To co pracował dla mnie (na podstawie @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" }); 
     } 

Gdy element foo jest widoczny, a następnie powoli zmieniać krycie do zera (przez animate), a następnie poczekaj, aż zrobi się to przed ustawieniem widoczności, aby ukryć widoczność. W przeciwnym razie, jeśli zostanie ustawiony na ukryty podczas procesu animacji, efekt zanikania nie nastąpi, ponieważ jest natychmiast ukryty.

Alternatywnie, można użyć prostsze, czystsze 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" }); 
     }