Jak animować "widoczność: ukryta"?

Question

Oto mój problem ... Czy możesz mi pomóc?

$(".button").hover(function(){ 
    $('.class').css({opacity: 1.0, visibility: "hidden"}).animate({opacity: 0}, 1200); 
},function(){ 
    $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200); 
}); 

Animuje się tylko wtedy, gdy się pojawia. :-(

Answer 1

Spróbuj w ten sposób:

$(".button").hover(function(){ 
    $('.class').css("opacity", "1.0").animate({opacity: 0}, 1200, function(){ 
    $('.class').css("visibility", "hidden"); 
}); 
},function(){ 
    $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200); 
}); 

to jednak nie jest najlepszym rozwiązaniem, aby fadeIn i fadeOut można użyć zamiast metod z tych nazw, które zapewniają jQuery, albo lepiej, przejścia użycie CSS. w przypadku możesz.

Answer 2

$(".button").hover(function(){ 
    $('.class').css({opacity: 1.0, visibility: "visible"}).animate(//start off from opacity 1 and visibile 
     {opacity: 0}, //then animate opacity to 0 
     1200, 
     function(){ //this will be run after the animation is completed 
      $(this).css({ 
       visiblity:"hidden" //so it will be hidden only after the animation has completed 
      }); 
     } 
    ); 
},function(){ 
    $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200); 
}); 

Answer 3

użytkowania fadeIn/fadeOut

$(".button").hover(function(){ 
    $('.class').fadeOut(1200); 
},function(){ 
    $('.class').fadeIn(1200); 
}); 

Możesz podać duration, które powinno osiągnąć twoje cele.

Answer 4

Jest tak, ponieważ zostało usunięte przed uruchomieniem kamery. Najpierw trzeba animować zanikanie, a następnie zastosować visibility: hidden po zakończeniu animacji.

Istnieje kilka sposobów, aby to zrobić: Przeglądarka wywołuje zdarzenie animationend (jest to prexied dla różnych przeglądarek - zobacz tutaj, aby uzyskać więcej informacji) lub możesz użyć lepszej biblioteki animacji niż animacja jQuery (np. Green Sock TweenLite - http://greensock.com/tweenlite) do obsługi animacji, co czyni trywialnym uruchamianie kodu na końcu animacji.

Answer 5

Dlaczego warto skorzystać z jQuery? Jest to o wiele bardziej efektywne w użyciu CSS, tak jak poniżej:

.fade { 
 
    width:100px; 
 
    height:100px; 
 
    background-color:darkgray; 
 
    opacity: 1; 
 
    transition: opacity .25s ease-in-out; 
 
    -moz-transition: opacity .25s ease-in-out; 
 
    -webkit-transition: opacity .25s ease-in-out; 
 
} 
 

 
.fade:hover { 
 
    opacity: 0; 
 
}

<div class="fade"></div>

Answer 6

Obiekt widoczność w CSS jest logiczna, albo włączyć lub wyłączyć.

Aby animacja zadziałała, niezależnie od tego, czy jest wykonywana z klatkami kluczowymi, przejściami lub jquery, punkt początkowy i końcowy ustawionej wartości właściwości należy podzielić na zestaw kroków z większą liczbą kroków powodujących w płynniejszej animacji.

Dla uzyskania prostego efektu, najlepiej jest uzyskać transition, please see the fiddle here. Użyj JavaScript, żeby dodać/usunąć zajęcia, które powodują przejście

.hidden { 
    opacity: 0; 
    transition: opacity 0.5s ease-in; 
} 

.show-me { 
    opacity: 1; 
} 

ustawić właściwość przejściowy określający właściwość do przejścia, a następnie długości, funkcja łatwość w użyciu (który opisuje zmiany w tempie, w którym animacja ma wpływ). Musisz również zdefiniować punkt początkowy i końcowy dla animowanej właściwości, jak widać z dwoma wartościami przezroczystości.

Dla rekordu - klatka kluczowa jest odpowiednia, jeśli efekt jest bardziej złożony, np. Gdy chcemy, aby jedna właściwość w pełni animowała się w połowie, a następnie animowała się z powrotem, podczas gdy inna trwała w pełnym wymiarze czasu lub oscylacji; a animacja JQuery zapewnia łatwy sposób działania na zakończenie animacji, która jest również czasami niezbędna.