JQuery шоу и Z-индекс

Question

Следующий код не работает должным образом:

РЕДАКТИРОВАТЬ:
Извините за недоразумение, я слишком упростил свою проблему, вот реальная проблема, с которой я сталкиваюсь: http://jsfiddle.net/bc6hr/

HTML:

<div id="1">div 1</div>
<div id="2">div 2</div>

CSS:

div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: white;
}
#1 {
    z-index: 2;
}

JS (jQuery):

$("div").hide();
$("#1").show();
$("#2").show();

Я должен что-то упустить, потому что, насколько я знаю, этот код должен отображать исчезновение "div 1" до "div 2", но на самом деле это рендеринг "div 2" с самого начала.
Как я мог заставить его отображать «div 1», зная, что я должен спрятать все div раньше? Я думал, что использование z-index было хорошей попыткой, но, возможно, я ошибаюсь ...

Answer 1

Прежде всего ваш атрибут id недействителен. Вы не можете начать идентификатор с номера.

Обновлен jsfiddle .

Answer 2

Я считаю, что идентификатор не может начинаться с цифры.Когда идентификаторы div изменяются на d1 и d2, они работают:

http://jsfiddle.net/mBWcM/4/

Answer 3

Измените ваши идентификаторы на действительные ... ( без начальных чисел )

пример http://jsfiddle.net/mBWcM/3/

Answer 4

Проблема в том, что 1 и 2 не являются действительными идентификаторами. Поэтому jQuery или парсер CSS не распознают элемент. Вместо этого используйте a и b и убедитесь, что оно работает: http://jsfiddle.net/mBWcM/1/

Проблема в том, что когда вы вызываете изменение z-index в JavaScript, элементы div даже отсутствуют (код находится в элементе head и сразу же выполняется). См. Источник страницы fiddler .

Обходной путь: охватить все в конструкции «Пуск, когда DOM готов»:

jQuery(document).ready(function () {
   // your code here
});

Редактировать: На самом деле, я думаю, что это проблема jsFiddle. Когда я перезагружаю страницу один или два раза, бывает, что «div1» остается видимым, в остальное время - «div2». Я только что увидел, что jsFiddle Indead оборачивает код в window.onload эквивалент.