jQuery fadeOut/fadeIn no funciona como se esperaba?

Estoy tratando de mostrar un fieldset a la vez, de acuerdo con la selección del usuario. La teoría es que, todos los conjuntos de campos deben ocultarse primero, entonces se debe mostrar el fieldset seleccionado. Estoy usando las funciones de jQuery fadeOut y 'fadeIn`.jQuery fadeOut/fadeIn no funciona como se esperaba?

Puede ver un violín de este here.

Pero no funciona bien. ¿Qué pasa? Cuando cambia el tipo de propiedad , se muestran los dos primeros conjuntos de campo, luego se atenúan y desaparecen, y luego aparece el conjunto de campos previsto. Sin embargo, el comportamiento deseado es que, en el cambio del tipo propiedad, grupo de campos actualmente visible, simplemente se desvanecen, y luego el desvanecimiento de campos previsto en.

Fuente

2011-10-04 Saeed Neamati

Usted debe enviar el código aquí para su uso futuro en caso de jsFiddle no existe. –

también puede utilizar una 'promesa' http://api.jquery.com/jQuery.when/ para asegurarse de que FadeIn sucede después, cuando fieldset ha desvanecido.

$(function() { 
    var ownershipType = $('#ownershipType').first(); 
    var fieldsets = $('fieldset'); 
    ownershipType.change(function() { 
     var promise = fieldsets.fadeOut(2000); 
     $.when(promise).then(function() {$('fieldset[data-ownership-type=' + ownershipType.val() + ']').fadeIn('fast'); 
     }); 
    }); 
});

http://jsfiddle.net/DtaHQ/26/

Fuente

2011-10-04 07:54:42 Vertigo

¡Bien, bien! Aprendí algo nuevo. Gracias por tu genus way @Vertigo. –

cambiar el código para

$(function() { 
    var ownershipType = $('#ownershipType').first(); 
    var fieldsets = $('fieldset'); 
    ownershipType.change(function() { 
     $('fieldset:visible').fadeOut(2000, function() { 
      $('fieldset[data-ownership-type=' + ownershipType.val() + ']').fadeIn('fast'); 
     }); 
    }); 
});

Sólo desea atenuar el fieldset que está actualmente visible.

http://jsfiddle.net/DtaHQ/24/

Fuente

2011-10-04 07:49:34

¿Pero por qué mi código no funciona? Quiero decir, después de todo, desvanecer algo que es invisible no debería romper nada? –

Samich tiene una respuesta. Su código original decía "desvanecer TODOS los conjuntos de campo". Pero tienes un buen punto. [La documentación de fadeOut] (http://api.jquery.com/fadeOut/) dice que los divs ya ocultos no están sujetos a esta animación. :) ¡Ayuda a explicar la buena cantidad de votos ascendentes a tu pregunta! –

El problema es que ya se ha ocultado fieldset y para estos elementos de animación de los fadeOut se activa inmediatamente, debido a que ya está oculto.

tratar de cambiar a esto:

$(function() { 
    var ownershipType = $('#ownershipType').first(); 
    ownershipType.change(function() { 
     $('fieldset:visible').fadeOut(2000, function() { 
      $('fieldset[data-ownership-type=' + ownershipType.val() + ']').fadeIn('fast'); 
     }); 
    }); 
});

Código: http://jsfiddle.net/DtaHQ/20/

Fuente

2011-10-04 07:49:52 Samich

Tu explicación se meció @Samich. Gran nota Gracias y +1 –

jQuery fadeOut/fadeIn no funciona como se esperaba?

Respuesta

Cuestiones relacionadas