Рекомендация (jQuery, CSS): как инициализировать скрытые элементы, которые будут переключаться видимым?

Question

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

У меня есть набор кнопок управления, прикрепленных к изображениям в галерее. Они должны быть изначально скрыты и переключаться видимым, когда мышь наводит курсор на изображение. Вопрос у меня такой:

Должны ли эти кнопки быть скрытыми в таблице стилей или оставаться видимыми и быть скрытыми jQuery при загрузке? Мне нужна постепенная деградация, поэтому кажется, что инициализация этого в CSS - плохая идея, если я хочу, чтобы они были видны, если javascript не включен.

Кроме того, я использую Ajax для загрузки страниц этих изображений. Если я сделаю это с помощью jQuery hide, это не повлияет на те, которые загружаются из ajax-запроса, поскольку он срабатывает только на $(document).ready(). Я пытался использовать live('ready'), но узнал, что это событие не поддерживается в live().

Так, что является лучшей практикой для чего-то подобного? Кажется, что есть много плюсов и минусов для того, чтобы сделать это в любом случае (css против document.ready), и если они скрыты по умолчанию CSS, кнопки будут хорошо переключаться с помощью пажинации ajax. Но если javascript не включен, функциональность кнопок будет потеряна. У кого-нибудь есть совет по этому поводу?

Примечание: я не упоминал об этом изначально, но это важно. В настоящее время я использую fadeToggle() для выполнения перехода, что может осложнить весь этот вопрос. Пока все решения работают, но не так много, когда появляется затухание.

Answer 1

Если вы пытаетесь изменить стиль элементов, загружаемых через Ajax, это почти как если бы вы пытались поразить движущуюся цель. Я создал бы две декларации в моей таблице стилей - одну для скрытой, другую для видимой - и затем переключал бы их, основываясь на классе, прикрепленном к тегу body (или любому другому содержащему тегу).

Вроде так:

body .mybutton {
  display:block;
}

body.loaded .mybutton {
  display:none;
}

Тогда в вашем файле JS:

$(document).ready(function() {
  $('body').addClass('loaded');
});

Таким образом, к любым элементам с именем класса mybutton - текущим и будущим - будет применен соответствующий стиль.

Answer 2

Сначала вы скрываете с помощью CSS, используя display:none;, а затем используете jQuery toggle (), чтобы отобразить и снова скрытьЭто лучший способ сделать это.Что касается людей, у которых не включен JavaScript, я бы об этом не беспокоился.Они составляют 1% пользователей.У всех включен JavaScript.

Проверьте рабочий пример http://jsfiddle.net/znJxh/