Duda con css en jQuery

[Middrel]

Hola, buenas tardes!

Tengo una duda al tratar de usar una instrucción de css en jQuery. Les explico:

Estoy tratando de hacer un pequeño menú manejado por pestañas, tab1, tab2, tab3, por ejemplo, y cada que le den click a alguna cambia un div con la información pertinente a cada una de estas. Para ello uso lo siguiente:

Código Javascript:

$(".tab1").click( function(e){
    $(".box1").css({"display":"inline","transition-duration":"1s"});
        $(".box2, .box3").css("display","none");
}
 
$(".tab2").click( function(e){
    $(".box2").css({"display":"inline","transition-duration":"1s"});
        $(".box1, .box3").css("display","none");
}
 
$(".tab3").click( function(e){
    $(".box3").css({"display":"inline","transition-duration":"1s"});
        $(".box1, .box2").css("display","none");
}
 

Sin embargo, aunque si cambian los contenidos, no se muestra el efecto de la transición "transition-duration : 1s".

Me he dado cuenta que siempre que uso "display", esta no funciona, pero en otro casos si la he podido usar. ¿Alguna razón del por qué?

¡Saludos y de antemano gracias por sus comentarios!

[Alexis88]

En este enlace puedes ver una lista de propiedades CSS que pueden ser afectadas por el efecto de transición. Como podrás ver, la propiedad display no aparece.

Off-topic:

Aunque es un tema netamente de CSS y no de jQuery o, para referirnos al lenguaje, de JavaScript, te aconsejo que trabajes con la propiedad opacity. Lo que suelo hacer es lo siguiente:

Para mostrar al elemento:

1. Le aplico el par atributo-valor display: {block, inline, inline-block, etc.};.
2. Le asigno el valor 1 al atributo opacity.

Para ocultar al elemento:

1. Le asigno el valor 0 al atributo opacity.
2. Usando un temporizador, establezco el mismo tiempo del valor del atributo de transición pero en milésimas de segundo (así trabaja el temporizador) y, en la función que ejecutará al completarse el tiempo, establezco el par atributo-valor display: none;.

[Middrel]

¡Hola Alexis88! Gracias por responder!

Si, ahora que veo no puedo usar la transición con display por medio de JQuery, lástima...

Voy a intentar usar opacity y te comento :D

Saludos!!