Come animare "visibilità: nascosta"?

Question

ecco il mio problema ... puoi aiutarmi per favore?

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

Si anima solo quando viene visualizzato. :-(

Answer 1

provare in questo modo:

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

Tuttavia, questo non è l'opzione migliore per fadeIn e fadeOut È possibile utilizzare invece i metodi con quei nomi che jQuery forniscono, o meglio, transizioni uso CSS. nel caso in cui si può.

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

Usa fadeIn/fadeOut

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

È possibile passare in duration che dovrebbe raggiungere i tuoi obiettivi

Answer 4

Ciò è perché viene rimosso prima che si animi cam. È necessario prima animare la dissolvenza in uscita, quindi applicare visibility: hidden al termine dell'animazione. Ci sono un paio di modi per farlo: il browser solleva un evento animationend (questo è preimpostato per vari browser - vedi qui per maggiori informazioni) oppure puoi usare una libreria di animazione migliore di jQuery animate (come Green Sock TweenLite - http://greensock.com/tweenlite) per gestire l'animazione, che rende banale l'esecuzione di codice alla fine dell'animazione.

Answer 5

Perché utilizzare jQuery per questo? E 'di gran lunga più efficiente di utilizzare i CSS, in questo modo:

.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

La proprietà di visibilità nei CSS è booleano, sia acceso o spento.

Affinché qualsiasi animazione funzioni, sia che si tratti di fotogrammi chiave, transizioni o jquery, il punto iniziale e il punto finale del set di valori della proprietà devono essere suddivisi in una serie di passaggi, con un numero maggiore di passaggi risultanti in un'animazione più fluida.

Per un semplice effetto come questo, un transition è il migliore, please see the fiddle here. Utilizzare JavaScript solo per aggiungere/rimuovere le classi che fanno scattare la transizione

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

.show-me { 
    opacity: 1; 
} 

si imposta la proprietà di transizione che definisce la proprietà di transizione, allora la lunghezza, la funzione facilità da usare (che descrive le modifiche alla velocità con cui l'animazione ha effetto). Devi anche definire il punto iniziale e il punto finale per la tua proprietà animata, come puoi vedere con i due valori di opacità.

Per la cronologia: un fotogramma chiave è appropriato se il tuo effetto è più complesso, come se si volesse che una proprietà fosse completamente animata a metà e quindi animata di nuovo mentre un'altra si prendesse tutto il tempo o per le oscillazioni; e JQuery animate fornisce un modo semplice per agire sulla conclusione di un'animazione che a volte è anche necessaria.