jQuery: скрытие картинок при загрузке страницы
Мне нужно скрыть фотографии, когда загружается моя интернет-страница, и заставить их появиться позже (они являются триггерами для других дивов, появляющихся/исчезающих). Причина в том, что я не хочу, чтобы они были доступны до моего .функция animate() фактически заставляет их появляться по-настоящему..
Так что в любом случае, я попробовал простой...
$(document).ready(function(){
$("#img1").hide();
$("#img2").hide();
});
...с помощью HTML...
<img id="img1" src="./images/img1.png" alt="image 1" />
<img id="img2" src="./images/img2.png" alt="image 2" />
...и CSS
#img1
{
z-index: 4;
position: relative;
top: 0%;
left: 5%;
opacity: 0;
padding: 20px;
}
#img2
{
z-index: 4;
width: 350px;
height: 140px;
position: relative;
top: 0%;
left: 15%;
opacity: 0;
padding: 20px;
}
...но это не работает.
Есть идеи?
5 ответов:
Во-первых, я бы попытался поместить предупреждение JS в ваш (документ).готовая функция, чтобы убедиться, что код выполняется правильно (ссылки на jQuery, синтаксис JS в порядке). Кроме того, проверьте с помощью добавления часов в Mozilla Firebug (или другой отладчик JS), что JQuery правильно подбирает объекты ("img1", "img2").
Вы также можете попробовать просто установить стиль img для отображения: нет в разметке, если он всегда будет скрыт при загрузке страницы каждый раз.
То есть,
<img src="imgs/image.jpg" style="display:none"></img>
Выше логика может быть перемещена в CSS.
Затем просто используйте функцию animate (), когда они требуются, чтобы показать изображения.
Попробуйте вот это
$(document).ready(function(){ $("#img1").css({display, 'none'}); $("#img2").css({display, 'none'}); });
Добавьте класс ко всем изображениям и установите свойство visible hidden по умолчанию, а затем удалите эту функцию animate или что-то еще. это будет работать
<style> .hiddenclass { display:none; } </style> <img src="imgs/image1.jpg" class="hiddenclass"></img> <img src="imgs/image2.jpg" class="hiddenclass"></img> ------ <img src="imgs/image3.jpg" class="hiddenclass"></img>
И в вашем сценарии анимации удалите
hiddenclass
из всех изображений с помощьюremoveClass
Можно также использовать функцию
.html()
См. Пример: http://jsfiddle.net/ipsjolly/jLNKL/