여러 롤오버 목록 항목에 문제가있는 경우 jquery를 사용하여 이미지가 흐려짐

마우스 오버 또는 마우스 오버 이벤트로 인해 롤오버 항목이 트리거되는 상황에 따라 단일 이미지가 여러 다른 잠재적 이미지로 사라지는 여러 롤오버 항목을 얻으려고합니다. 시각. 나는 stackoverflow 및 무수한 다른 튜토리얼 사이트를 샅샅이 조사 해왔다. 그리고 어떤 이유로이 작업을 수행하는 방법을 찾지 못한다. 나는 하루 종일이 일을하기 위해 노력했고,이 시점에서 내 머리카락을 꺼내고 있습니다. 어떤 도움이라도 대단히 감사하겠습니다! 여러 롤오버 목록 항목에 문제가있는 경우 jquery를 사용하여 이미지가 흐려짐

나는이 SO 질문에 대한 답변을 수정하려고 :

<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>

그냥 경우 : 나는 대부분 그냥 가져가 이벤트에 클릭 이벤트를 변경하고 각 롤오버 목록 항목에 대한 기능을 중복 Smooth image fade out, change src, and fade in with jquery 이뿐만 아니라 나는 것을 제공하는 것입니다 방법으로 점점 내 스타일에 뭔가 :

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()는

이 #menu에 대한 CSS에서 margin: -350px 0 0;를 제거하고 시도 애니메이션을 중지합니다.

출처

2013-02-18 08:27:16

코드가 필요에 따라 작동합니다. div가 #content div 뒤에 있었으므로 표시되지 않았습니다. #menu를 제거하면 CSS가 내 문제를 해결했습니다. –

빠른 응답을 보내 주셔서 감사합니다! 실제로는 음수 여백과 잘 맞습니다. 우연히 클래스로 분류 된 ID를 가지고 있다는 사실을 깨달았습니다. 그것이 작동하지 않는 주된 이유였습니다. 내가 ".stop()"을 사용하지는 않았지만 롤오버 효과 후에 사용자가 원래 이미지로 되돌아 갈 수있는 무언가가 필요했기 때문에 대답을 "확인"하겠지만 비슷합니다. – MonkeyTyping

여러 롤오버 목록 항목에 문제가있는 경우 jquery를 사용하여 이미지가 흐려짐

답변

관련 문제