jQuery 마우스를 왼쪽/오른쪽으로 바꾸기

Question

내 DIV 내에서 마우스를 왼쪽 또는 오른쪽으로 움직일 때로드 할 이미지가 두 개 있습니다. 새 이미지를 마우스로 가리키면 사라지도록하고 페이드 아웃하려면 fadeIn을 알아낼 수 없습니다. 도와주세요! 현재의 페이드가 작동하지 않습니다와 나는 그것을 알아낼 수 없습니다 :(난 그냥 지난 일 JS를 배운 그래서 어떤 멍청한 놈 도움이 좋은 것입니다!

<div id="infruition-rollover"> 
<img id="default" src="" width="990" height="411"/> 
<img class="off" src="InfruitionWIAYLeftRollover.jpg" width="990" height="411" /> 
<img class="off" src="InfruitionWIAYRightRollover.jpg" width="990" height="411" /> 
</div> 
</body> 

<script language="javascript" src="jquery-1.11.1.min.js"></script> 
<script> 
console.log("hello!"); 

$(document).ready(function() { 
$('#default').attr('src','InfruitionWIAYNoRollover.jpg'); 

$('#infruition-rollover').mousemove(function(e){ 
    if (e.pageX < 450) { 
     console.log("Entered Left: "+e.pageX); 
     $('#default').fadeIn(100,function() { 
     $(this).attr('src','InfruitionWIAYLeftRollover.jpg'); 
     }) 
     } 
    else { 
     console.log("Entered Right: "+e.pageX); 
     $('#default').fadeIn(100,function() { 
      $(this).attr('src','InfruitionWIAYRightRollover.jpg');}) 

     } 
}) 
}) 
</script> 

Answer 1

확인이 예 내가 당신을 위해 한 :

HTML

<div id="infruition-rollover"> 
<img id="default" src="" width="990" height="411"/> 
<img class="off" src="http://www-static.weddingbee.com/pics/36694/head.jpeg" width="100" height="100" /> 
<img class="off" src="http://www.random.org/analysis/randbitmap-rdo.png" width="100" height="100" /> 
</div> 

JAVASCRIPT

console.log("hello!"); 

$(document).ready(function() { 
$('#default').attr('src','InfruitionWIAYNoRollover.jpg'); 

$('#infruition-rollover').mousemove(function(e){ 
    if (e.pageX < 100) { 
     console.log("Entered Left: "+e.pageX); 
     $('#default').fadeIn(100,function() { 
     $(this).attr('src','http://www-static.weddingbee.com/pics/36694/head.jpeg'); 
     }) 
     } 
    else { 
     console.log("Entered Right: "+e.pageX); 
     $('#default').fadeIn(100,function() { 
     $(this).attr('src','http://www.random.org/analysis/randbitmap-rdo.png'); 

     }) 

     } 
}) 
}) 

JSFIDDLE