이벤트를 fadeToggle()로 클릭하십시오 - 내 코드에 문제가 있습니까?

Question

<map> 태그를 사용하여태그가 정의 된 런던 대화식지도를 만들었습니다. 15 개 영역 중 하나를 클릭하면 클릭 한 영역에 따라지도 원본이 다른 영역으로 바뀝니다. 모든 영역에는 개별 ID가 있으며 해당 ID에 따라 소스가 변경됩니다.

다시 해당 영역을 클릭하면지도 이미지가 원래 소스로 되돌아갑니다.

<IMG id="londonmap" SRC="images/londonmap.png" USEMAP="#london"> 
<map name="london"> 
<area id="dalston" href="#" shape="rect" coords="364,75,500,200" 
     alt="Dalston Tube Stop" title="Dalston Area"> 
</map> 

JQuery와 내가 클릭에 사용되는 다음과 같이 unclicking 보이는 :

이것에 대한 간단한 HTML은 약간 너무처럼

$(document).ready(function() 
{ 
    $('#dalston').click(function() 
    { 
     // select the image and determine what the next src will be 
     var londonMap = $('#londonmap'); 
     var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png'; 

     // re-bind the src attribute 
     londonMap.attr('src', newImageSrc); 
    }); 
}); 

모든 것은 여기까지 잘 작동합니다.

는

$(document).ready(function() 
{ 
$('#dalston').click(function() { 
    $('#londonmap').fadeToggle('slow', function() 
    { 
     // select the image and determine what the next src will be 
     var londonMap = $('#londonmap'); 
     var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png'; 

     // re-bind the src attribute 
     londonMap.attr('src', newImageSrc); 
    }); 
    }); 
}); 

문제는 지금이다 : 지금, 나는 여분의 효과를 조금이 .fadeToggle()을 변화하는 이미지를 가지고이에 코드로 변경 부드러운 전환과 같은 클릭하면 그것이 좋은 것이라고 생각 코드의 절반 만 예상대로 반응합니다. 원본 이미지는 사라지지만 두 번째 이미지는 사라지지 않습니다. 나는 그것이 이벤트가 발생하는 순서와 관련이 있다고 생각하지만, jQuery에서 약간의 멍청한 반응을 보임으로써 나는 무엇이 잘못되었는지 알 수 없다.

지도를 끝내는 것을 막는 것은 마지막 일이므로 도움이 될 것입니다.

Answer 1

. 이미지가 교체되면 다시 표시해야합니다.

---

UPDATE

$(document).ready(function() 
{ 
$('#dalston').click(function() { 
    $('#londonmap').fadeOut('slow', function() { 
     // select the image and determine what the next src will be 
     var londonMap = $('#londonmap'); 
     var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png'; 

     // re-bind the src attribute 
     londonMap.attr('src', newImageSrc); 
     $('#londonmap').fadeIn('slow'); 
     }); 
    }); 
}); 

또는 작업 예 here을 프라하, 단.

Answer 2

보십시오 : 그것은 fadeToggle 기능을 사용하여 페이드 일단 당신이 실제로 다시 요소를 표시하지 않을

$(document).ready(function() 
{ 
$('#dalston').click(function() { 
    $('#londonmap').fadeToggle('slow', function() 
    { 
     // select the image and determine what the next src will be 
     var londonMap = $('#londonmap'); 
     var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png'; 

     // re-bind the src attribute 
     londonMap.attr('src', newImageSrc); 
     //show the image 
     $('#londonmap').fadeToggle('slow'); 
    }); 
    }); 
}); 

Answer 3

당신은 전환을 반대로 그것을 말하지 않았다, 입력이

$(document).ready(function() { 

    $('#dalston').click(function() { 

     $('#londonmap').fadeToggle('slow', function() { 

      // select the image and determine what the next src will be 
      var newImageSrc = $(this).attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png'; 

      // re-bind the src attribute and fade back in 
      $(this).attr('src', newImageSrc).fadeToggle('slow'); 
     }); 
    }); 
});