Устранение неполадок с несколькими элементами списка опрокидывания при запуске изображения исчезает с помощью jquery

Я пытаюсь получить несколько элементов опрокидывания, которые заставляют одно изображение исчезать на несколько других потенциальных изображений, в зависимости от того, какие элементы опрокидывания запускаются при наведении мыши или наведении время. Я просматривал stackoverflow и бесчисленное множество других обучающих сайтов и по какой-то причине не мог найти способ сделать это, что работает вообще. Я потратил целый день, пытаясь заставить это работать, и я просто вытаскиваю свои волосы в этот момент. Любая помощь будет принята с благодарностью!Устранение неполадок с несколькими элементами списка опрокидывания при запуске изображения исчезает с помощью jquery

Я попытался изменить ответ на этот SO вопрос: Smooth image fade out, change src, and fade in with 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;

насколько я могу сказать, этот код должен работать нормально, но ничего не происходит с изображением в #content DIV вообще. Что я делаю не так?

источник

2013-02-18 MonkeyTyping

jQuery .stop поможет вам.

stop() остановить анимацию

Удалить margin: -350px 0 0; из CSS для #menu и попробовать.

источник

2013-02-18 08:27:16

ваш код работает по мере необходимости, только div был позади #content div, поэтому он не был показан, поэтому удалите #menu css, решив его на моей стороне. –

Спасибо за быстрый ответ! На самом деле он отлично работает с отрицательным запасом. Я понял, что у меня также был идентификатор, обозначенный как класс случайно, и это была основная причина, по которой он не работал. Я «проверю» ваш ответ, хотя из-за того, что мне нужно что-то, что вернет пользователя к исходному изображению после эффекта опрокидывания, хотя я не использовал '.stop()', но нечто подобное. – MonkeyTyping

Устранение неполадок с несколькими элементами списка опрокидывания при запуске изображения исчезает с помощью jquery

ответ

Смежные вопросы