Как скрыть новые элементы в jQuery?

Question

У меня есть этот код:

var $msg = jQuery('<div></div>')
    .hide()
    .appendTo(document.body)
;
if ($msg.is(":hidden")) {
    console.log("hidden");
} else {
    console.log("visible");
}

При запуске он регистрирует "hidden" в Firefox, но "visible" в Google Chrome. Это ошибка или я что-то не так делаю?

Answer 1

Вы пытались скрыться после добавления его в тело?

$(function() {
    var $msg = jQuery('<div>hello</div>').appendTo(document.body).hide();
    if ($msg.is(":hidden")) {
        console.log("hidden");
    } else {
        console.log("visible");
    }
}); // $()

работал для меня в обоих браузерах.

Answer 2

, как сказал eed3si9n, это было то, что вызов .hide() был до вызова .appendTo().

Я подумал, что просто добавлю этот ответ, поскольку нашел другой способ, который также работает:

jQuery('<div></div>')
    .css("display", "none")
    .appendTo(document.body)
;

Я не знаю точно, работает ли он так, но я думаю, что добавление элемента в DOM со скрытым должно быть быстрее, поскольку браузер не должен отображать его?

---

Обновление для тех из вас, кто похож на меня и должен точно знать, как все работает:

Код для jQuery.hide () - комментарии, добавленные мной

hide: function(speed,callback){
    return speed ?

        // this block of code won't be run, since speed will be undefined
        this.animate({
            height: "hide", width: "hide", opacity: "hide"
        }, speed, callback) :

        // this is the relevant code
        this.filter(":visible").each(function(){
            this.oldblock = this.oldblock || jQuery.css(this,"display");

            // you can see here that it merely sets the display to 'none'
            this.style.display = "none";
        }).end();
}

и вот код для селектора :hidden:

hidden: function(a) {
    return "hidden" == a.type                        // <input type="hidden" />
        || jQuery.css(a, "display") == "none"        // style.display = none
        || jQuery.css(a, "visibility") == "hidden";  // style.visibility = hidden
}

Это на самом деле не объясняет, почему Chrome не показывает элемент как скрытый ...