Animar apertura/cierre de columnas de tabla en jQuery

Question

¿Cómo puedo animar la apertura/cierre de columnas de tabla en jQuery?

Actualmente tengo este pedazo de código:

jQuery(function($){ 
    $(".togglebutton").click(function(e){ 
     if (cost_visible) { 
      $(".numbers").animate({width: 80}, 1500); 
      $(".costs").animate({width: 0}, 1500); 

     } else { 
      $(".numbers").animate({width: 0}, 1500); 
      $(".costs").animate({width: 60}, 1500); 
     } 
    }); 
}); 

y mi HTML que contiene etiquetas de tabla/TR/TH/TD estándar con la TH y etiquetas TD que llevan los nombres de las clases que se utilizan para identificar lo que tiene que ser abierto o cerrado

El problema parece ser que después de que jQuery toca la mesa, las celdas afectadas repentinamente sienten la necesidad de apilarse una encima de la otra en lugar de quedarse ordenadamente en una fila.

Supongo que esto tiene que ver con que jQuery solo sea capaz de animar elementos "en bloque", no elementos que se muestran como "table-like". Entonces, ¿puedo hacer una tabla con elementos de bloque? ¿O hay otra forma de animar elementos de mesa? He encontrado this solución sugerida, pero parece que una molestia para encerrar todos sus elementos de tabla en apenas DIV para la animación ...

Answer 1

Después de algunos estudios, he descubierto que ...

• El problema es causado por los elementos TH y TD que establece jQuery para "mostrar: bloquear" los elementos para la animación. Todavía no hay manera de hacer que jQuery se comporte de manera diferente.
• Encerrar los elementos TH y TD en etiquetas DIV no funciona, algunas búsquedas en Google dan la sugerencia de que HTML becomes invalid al usar etiquetas DIV dentro de una estructura TABLE.
• Encerrando el contenido de los elementos TH y TD en etiquetas DIV no funciona, el contenido comienza a flotar después de la animación y no permanece dentro de los elementos TH y TD.
• The same article revela que la animación del cierre de apertura de la tabla filas es posible utilizando secciones de TBODY dentro de la tabla.

logré lo que quería sin embargo, y aquí es cómo:

• corté la mesa en varias sub-tablas que consisten en los grupos de columnas que quiero mostrar y ocultar
• I delimitada éstos sub-tablas en etiquetas DIV y floated uno al lado del otro.
• Utilicé jQuery para mostrar/ocultar estos DIV.

Espero que esto ayude a cualquiera, y si se encuentra una solución más elegante, por favor deje un mensaje.

Answer 2

Si bien no tiene el mismo efecto, los métodos jQuery de fadeIn() y fadeOut() funcionan correctamente en las tablas. Los métodos show() y hide() (sin animación) también funcionan.

Answer 3

Feliz aniversario.

Es curioso cómo enero parece ser el tiempo de efectos deslizantes de la mesa. Supongo que es la facilidad para volver al trabajo oye :) Pero me las arreglé para crear un colapso de columnas laterales efecto.

$(table).each(... 
    var columnNo = $(cell).index(); 
    $('div', cell).animate({ width: '0px' }, 'slow'); 
    $(cell).closest("table") 
     .find("tr td:nth-child(" + (columnNo + 1) + ") div") 
     .animate({ width: '0px' }, 'slow') 
...) 

Básicamente esta es una solución usando divs. Selecciono cada cell "th" y luego busco cada otra celda en esa columna. Y progressivlu reduce cada tamaño de píxel div mediante animación. La tabla volverá a calcular según la especificación HTML, porque el espacio de ocupación está cambiando. Una vez que esté completo, puede ocultar la columna para hacer que "desaparezca"

Script para envolver todo en un div, como en la carga de la página o después de hacer clic en un botón. Puedes eliminar el div una vez que la animación se haya completado, en caso de que se meta con el envío de tu formulario o con otros scripts.

$('#Stupid_RadGrid th').each(function() { 
      $(this).wrapInner("<div></div>"); 
}); 
$('#Stupid_RadGrid td').each(function() { 
     $(this).wrapInner("<div></div>"); 
}); 

Voy a actualizar una vez que lo tenga funcionando en ambos sentidos.

Answer 4

Mi solución es usar una superposición div. La animación se realizará en esta superposición div, mientras que el elemento de la tabla permanecerá intacto.

Aquí el demo.

JS:

$("div").css("width", $("table").width() + 10); //10px of margin 
$("div").css("height", $("table").height() + 10); //10px of margin 

$("#show").click(function(){ 
    $("div").animate({ 
     left: $("div").width() 
    }, function(){ 
    $("div").hide(); 
    }); 
}); 

$("#hide").click(function() { 
    $("div").show("fast", function(){ 
     $("div").animate({ left: "0px" }); 
    }); 
});