it-swarm.it

jQuery css Visibilità con animazione

Ho pochi div posizionati uno sotto l'altro e sto usando la visibilità CSS per sfumarli dentro e fuori. Il motivo per cui utilizzo la visibilità è che i div non si spostano.

Per dissolvenza In uso:

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

e per dissolvenza sto usando:

$('.drop1').css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1.0})}, 200);

FadeIn funziona, ma fadeOut non funziona.

Ora, potresti pensare che il problema sia l'ultimo ', 2', ma dovrò usarlo come ritardo dal momento della dissolvenza/visibilità: hidden è su evento di mouseleave dopo 200ms.

Quindi la mia domanda è: come posso fare la visibilità nascosta con l'animazione per agire come dissolvenza.

Molte grazie

51
jQuerybeast

$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);

67
Blazemonger

perché renderlo così difficile, invece di animare il CSS, è possibile utilizzare la funzionalità di dissolvenza predefinita

$('.drop1').fadeIn(200);
$('.drop1').fadeOut(200);

modifica

se vuoi comunque sfumarlo senza perdere l'altezza. puoi usare fadeTo (durata, opacità, [callback]);

$('.drop1').fadeTo(200, 0);

controlla questo esempio: http://jsfiddle.net/ufLwy/1/

59
Sander

Avevo problemi simili, ed ecco cosa ho finito per fare.

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 )
    ).done( function(){
        $( selector ).css('visibility', 'hidden')
        complete();
    });
}

Il motivo per cui l'ho fatto è quello

  1. fadeIn ()/fadeOut () usa 'display' che fa salire l'altezza di un elemento
  2. fadeTo non influisce sulla "visibilità", quindi mentre l'elemento è visivamente nascosto con opacità: gli utenti sono ancora in grado di interagire (ovvero fare clic) sull'elemento invisibile
  3. animate () è asincrono, quindi concatenare CSS alla fine non garantisce che verrà eseguito al termine dell'animazione. Solo usando l'oggetto Deferred che le animazioni restituiscono ($ .when ()/$ .done ()) avrai la garanzia che il css sia applicato dopo all le animazioni sono complete.

MODIFICA In alternativa, è possibile applicare la "visibilità: nascosta" a ogni singolo elemento una volta completata la rispettiva animazione. Questo potrebbe essere leggermente più veloce per la selezione di gruppi più grandi di elementi, dal momento che stai interrogando il DOM per il gruppo di elementi solo una volta.

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 , function(){ 
            $(this).css('visibility', 'hidden');
        } )
    ).done( complete );
}
7
hypno7oad

Ho avuto un problema simile e l'ho risolto in questo modo:

Per sfumare:

$("#id").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0},200);

Per svanire:

$("#id").animate({opacity: 0.0}, 200, function(){
    $("#"+txtid).css("visibility","hidden");
});

Come puoi vedere, nascondo il div "#id" una volta terminata l'animazione. Spero non sia troppo tardi

5

So che questo è un vecchio post, ma mi sono imbattuto in una situazione simile e questo è quello che ho finito per fare

$(".drop1").css("visibility", "visible").show().fadeOut(5000);
0
codingforpassion