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   4  

5 ответов:

Во-первых, я бы попытался поместить предупреждение JS в ваш (документ).готовая функция, чтобы убедиться, что код выполняется правильно (ссылки на jQuery, синтаксис JS в порядке). Кроме того, проверьте с помощью добавления часов в Mozilla Firebug (или другой отладчик JS), что JQuery правильно подбирает объекты ("img1", "img2").

Вы также можете попробовать просто установить стиль img для отображения: нет в разметке, если он всегда будет скрыт при загрузке страницы каждый раз.

То есть, 

<img src="imgs/image.jpg" style="display:none"></img>

Выше логика может быть перемещена в CSS.

Затем просто используйте функцию animate (), когда они требуются, чтобы показать изображения.

4  

Попробуйте вот это. opacity: 0; удалить строку.

Http://jsfiddle.net/2wqwf/2/

4  

Попробуйте вот это

$(document).ready(function(){
    $("#img1").css({display, 'none'});
    $("#img2").css({display, 'none'});
});
1  

Добавьте класс ко всем изображениям и установите свойство 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

1  

Можно также использовать функцию .html()

См. Пример: http://jsfiddle.net/ipsjolly/jLNKL/

0