Как добавить display: inline-block в функцию jQuery show()?

Ответ 1

Вместо show попробуйте использовать CSS для скрытия и отображения содержимого.

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");
}

Ответ 2

Настройка свойства CSS после использования .show() должна работать. Возможно, вы нацеливаете не тот элемент на своей HTML-странице.

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

Но если вы не используете никаких эффектов .show(), .hide(), почему бы вам не установить эти свойства CSS вручную:

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

Ответ 3

Используйте css() сразу после show() или fadeIn() следующим образом:

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

Ответ 4

Решение Razz будет работать для методов .hide() и .show(), но не будет работать для метода .toggle().

В зависимости от сценария, наличие класса css .inline_block { display: inline-block; } и вызов $(element).toggleClass('inline_block') решает проблему для меня.

Ответ 5

Я сделал это

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

работает как шарм.

Ответ 6

Вы можете использовать animate insted show/hide

Что-то вроде этого:

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");
}

Ответ 7

попробуйте следующее:

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

Ответ 8

Я думаю, что вы хотите как анимацию, так и установить свойство отображения в конце. В этом случае вам лучше использовать обратный вызов show(), как показано ниже

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

Таким образом вы достигнете обоих результатов.

Ответ 9

<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>

Ответ 10

Фактически jQuery просто очищает значение свойства display и не устанавливает его в "block" (см. внутреннюю реализацию 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";
        }
    }

Обратите внимание, что вы можете переопределить $.fn.show()/$. fn.hide(); сохранение оригинального отображения в самом элементе при скрытии (например, в качестве атрибута или в $.data()); и затем прикладывать его обратно при показе.

Кроме того, использование css важно!, вероятно, не будет работать здесь, так как установка стиля inline обычно сильнее любого другого правила

Ответ 11

Лучший .let it parent display :inline-block или добавить родительский div, что CSS имеет только display :inline-block.

Ответ 12

Лучший способ добавить важный суффикс в селектор.

Пример:

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