Поэтому, впервые посетив собрание местного клуба по программированию, я вдохновился снова посмотреть на jQuery и попытаться повторить то, о чем говорил один из докладчиков. У меня есть общее представление о проблеме, и все в порядке, просто я не могу заставить изображение (которое наведено курсором) появляться над изображением, которое не было наведено. Я думал, что настройка z-индекса поможет отрицать это, но, похоже, ничего не работает.
Я загрузил файлы и т.д. на http://www.downloadthatmovie.com/jquery/,, и вот исходный код страницы:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Animation 3</title>
<style type="text/css">
.imgOpa
{
height:200px;
width:200px;
opacity:0.5;
filter:alpha(opacity=50);
z-index:0;
}
article{
padding:20px;
}
img{
z-index:0;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
</head>
<body>
<article>
<p>
<img class="imgOpa" src="img/image1.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image2.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image3.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image4.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image5.jpg" alt="Image 1" />
</p>
</article>
<script type="text/javascript">
$(function() {
$('.imgOpa').each(function() {
$(this).hover(
function() {
$(this).stop().animate({ "opacity": 1.0, "margin-top":0, "margin-right":0, "margin-right":-50, "z-index":999, "height":250, "width":250 }, 100);
},
function() {
$(this).stop().animate({ "opacity": 0.5, "margin-top":0, "margin-right":0, "margin-right":0, "z-index":1, "height":200, "width":200 }, 100);
})
});
});
</script>
</body>
</html>
То, как изображения ведут себя сейчас, вероятно, выглядит странно, но я просто проверяю несколько вещей, прежде чем заняться более крупной проблемой. Как я уже говорил ранее, я хочу, чтобы изображение, на которое наведен курсор, было над другими изображениями. Прошло 4 месяца с тех пор, как я в последний раз прикасался к jQuery, но, наконец, проснулся и снова знакомлюсь с ним.
Приветствует всех!