Как скрыть div с помощью jQuery?

83

Когда я хочу скрыть HTML <div>, я использую следующий код JavaScript:

var div = document.getElementById('myDiv');
div.style.visibility = "hidden";
div.style.display = "none";

Что эквивалентно этому коду в jQuery?

javascript jquery Камачи
источник

Ответы:

154 
$('#myDiv').hide();

или же

$('#myDiv').slideUp();

или же

$('#myDiv').fadeOut();
Суджит Агарвал
источник
На самом деле все три одинаковые, но display:noneс тремя разными эффектами анимации. Правильный ответ - @ honk31, .css("visibility", "hidden")и для этого есть цель! visiblity:hiddenОтличие display:noneпродолжает использовать пространство, display:noneбудет вести себя так, как он никогда не существующий там.
Разработчик
1
@Developer Хотя это интересный и потенциально полезный момент, я не вижу абсолютно ничего, указывающего на то, что ваше решение дало желаемый эффект. Напротив, похоже, ОП нашла достаточно хорошо ответив на свой вопрос. Для моих целей продолжать занимать место было бы довольно нежелательно. Не будь высокомерным.
donutguy640
Как мы говорили перед RTFM. В начальном посте человек спрашивает, в чем разница между visibility = "hidden" и display = "none", спрашивал ли он когда-нибудь, как сделать скрытую анимацию? Оставайтесь в теме!
Разработчик
27 
$("#myDiv").hide();

установит для отображения css значение none. если вам нужно установить видимость как скрытую, это можно сделать с помощью

$("#myDiv").css("visibility", "hidden");

или объедините оба в цепочку

$("#myDiv").hide().css("visibility", "hidden");

или напишите все с помощью одной функции css ()

$("#myDiv").css({
  display: "none",
  visibility: "hidden"
});
гудок31
источник
Этот ответ следует считать правильным, я понятия не имею, почему люди проголосовали за совершенно неправильный ответ!
Разработчик
14

Если вы хотите, чтобы элемент сохранял свое пространство, вам нужно использовать,

$('#myDiv').css('visibility','hidden')

Если вы не хотите, чтобы элемент сохранял свое пространство, вы можете использовать,

$('#myDiv').css('display','none')

или просто,

$('#myDiv').hide();
специальный прицел
источник
7

$("myDiv").hide(); и $("myDiv").show(); не так хорошо работает в Internet Explorer.

Я решил это сделать, чтобы получить html-контент с myDivпомощью.html() .

Затем я написал его во вновь созданный DIV. Затем я добавил DIV к телу и добавил содержимое переменной ContentкHiddenField затем прочитал это содержимое из только что созданного div, когда я хотел показать DIV.

После того, как я использовал этот .remove()метод, чтобы избавиться от DIV, который временно удерживал мои DIV-файлы html.

var Content = $('myDiv').html(); 
        $('myDiv').empty();
        var hiddenField = $("<input type='hidden' id='myDiv2'>");
        $('body').append(hiddenField);
        HiddenField.val(Content);

а затем, когда я хотел снова ПОКАЗАТЬ контент. 

        var Content = $('myDiv');
        Content.html($('#myDiv2').val());
        $('#myDiv2').remove();

Это было более надежно, чем методы .hide()& .show().

Сесил Теодор
источник
2

$('#myDiv').hide(); Функция скрытия используется для редактирования содержимого, а функция отображения используется для повторного отображения.

Чтобы узнать больше, нажмите на эту ссылку .

Нанд Кишор Агарвал
источник