Я пытаюсь получить несколько элементов ролловера, которые заставляют одно изображение исчезать в несколько других потенциальных изображений в зависимости от того, какие элементы ролловера запускаются событием наведения или наведения мыши в это время. Я просмотрел stackoverflow и бесчисленное множество других учебных сайтов и по какой-то причине не могу найти способ сделать это, который вообще работает. Я провел целый день, пытаясь заставить это работать, и сейчас просто рву на себе волосы. Любая помощь будет принята с благодарностью!
Я попытался изменить ответ на этот вопрос SO: Гладкое исчезновение изображения, изменение источника и появление с помощью jquery В основном я просто изменил событие клика на событие наведения, а затем продублировал функцию для каждого элемента списка прокрутки:
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#album01').hover(function() {
$('#homeimg').fadeOut(500, function() {
$(this).attr('src', 'photo01.jpg').bind('onreadystatechange load', function(){
if (this.complete) $(this).fadeIn(500);
});
});
});
$('#album02').hover(function() {
$('#homeimg').fadeOut(500, function() {
$(this).attr('src', 'photo02.jpg').bind('onreadystatechange load', function(){
if (this.complete) $(this).fadeIn(500);
});
});
});
$('#album03').hover(function() {
$('#homeimg').fadeOut(500, function() {
$(this).attr('src', 'photo03.jpg').bind('onreadystatechange load', function(){
if (this.complete) $(this).fadeIn(500);
});
});
});
});
</script>
<body>
<div id="menu">
<ul>
<li id="album01"><a href="http://www.website.com/album01">album 3</a></li>
<li id="album02"><a href="http://www.website.com/album02">album 2</a></li>
<li id="album03"><a href="http://www.website.com/album03">album 2</a></li>
</ul>
</div>
<div id="content">
<img id="homeimg" src="images/home.jpg" alt="home"/>
</div>
</body>
и на всякий случай, если в моем стиле есть что-то, что мешает, я также предоставлю это:
a:link, a:active, a:visited {
display:block;
color: #000000;
text-decoration: none;
}
ul li a:hover {
display:block;
padding: 5px;
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}
#menu {
background: #FFFFFF;
width: 200px;
height 700px;
top: 50%;
padding: 0px 20px 450px 20px;
margin: -350px 0px 0px 0px;
overflow: auto;
position: fixed;
z-index: 2;
}
#content {
position: absolute;
height: 574px;
margin: -277px 0px 0px 0px;
padding: 0px 200px 0px 240px;
top: 50%;
overflow-x: hidden;
white-space: nowrap;
Насколько я могу судить, этот код должен работать нормально, но с изображением в div #content вообще ничего не происходит. Что я делаю неправильно?
