¿Cómo agregar display: inline-block en una función jQuery show ()?

Tengo un código como este:

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");

    var id = obj.attr("rel");
    $('#' + id).show();
    obj.addClass("selected");
}

La función show agrega display:block. Pero me gustaría agregar en display:inline-blocklugar de bloquear.

En lugar de show, intente usar CSS para ocultar y mostrar el contenido.

function switch_tabs(obj) {
    $('.tab-content').css('display', 'none'); // you could still use `.hide()` here
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#' + id).css('display', 'inline-block');
    obj.addClass("selected");
}

Establecer la propiedad CSS después de haber usado .show()debería funcionar. Quizás esté apuntando al elemento incorrecto en su página HTML.

 $('#foo').css('display', 'inline-block');

Pero si no está utilizando ningún efecto de .show(), .hide()por qué no establece esas propiedades CSS manualmente como:

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');

Use css () justo después de show () o fadeIn () así:

$('div.className').fadeIn().css('display', 'inline-block');

yo lo hice

function showPanels()  {
    $('.panels').show("slow");
    $('.panels').css('display','inline-block');
}

Funciona de maravilla.

La solución de Razz funcionaría para los métodos .hide()y .show()pero no funcionaría para el .toggle()método.

Dependiendo del escenario, tener una clase css .inline_block { display: inline-block; }y llamar me $(element).toggleClass('inline_block')resuelve el problema.

Puedes usar animar insted de show / hide

Algo como esto:

function switch_tabs(obj)
{
    $('.tab-content').animate({opacity:0},3000);
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).animate({opacity:1},3000);
    obj.addClass("selected");
}

prueba esto:

$('#foo').show(0).css('display','inline-block');

Creo que desea tanto la animación como establecer la propiedad de visualización al final. En ese caso, es mejor que use la show()devolución de llamada como se muestra a continuación

$("#my_obj").show(400,function() {
    $("#my_obj").css("display","inline-block")
}) ;

De esta forma logrará los dos resultados.

<style>
.demo-ele{display:inline-block}
</style>

<div class="demo-ele" style="display:none">...</div>

<script>
$(".demo-ele").show(1000);//hide first, show with inline-block
<script>

en realidad, jQuery simplemente borra el valor de la propiedad 'display' y no lo establece en 'block' (vea la implementación interna de jQuery.showHide ()) -

   function showHide(elements, show) {
    var display, elem, hidden,

...

         if (show) {
            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if (!values[index] && display === "none") {
                elem.style.display = "";
            }

...

        if (!show || elem.style.display === "none" || elem.style.display === "") {
            elem.style.display = show ? values[index] || "" : "none";
        }
    }

Tenga en cuenta que puede anular $ .fn.show () / $. Fn.hide (); almacenar la visualización original en el elemento en sí mismo cuando se oculta (por ejemplo, como un atributo o en $ .data ()); y luego aplicarlo nuevamente cuando se muestra.

Además, el uso de CSS importante! probablemente no funcionará aquí, ya que establecer un estilo en línea suele ser más fuerte que cualquier otra regla

El mejor .let es padre display :inline-blocko agrega un padre divque CSS solo tiene display :inline-block.

La mejor manera es agregar un sufijo importante al selector.

Ejemplo:

 #selector{
     display: inline-block !important;                   
}