用fadeToggle（）點擊事件 - 我的代碼有什麼問題？

Question

我使用<map>標記創建了倫敦的互動式地圖，該標記定義了15個<area>標記。在點擊15個區域中的任何一個時，根據點擊的區域，地圖的來源被另一個替換。所有區域都有一個單獨的ID，並且源根據該ID進行更改。

再次點擊該區域會將地圖圖像恢復爲其原始來源。

這個簡化的HTML有點像這樣：

<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如下所示：

$(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); 
    }); 
}); 

一切了這裏工作得很好。現在，我想點擊一個平滑的過渡，因此改爲代碼這個時候這將是很好，只是有點額外的效果，具有不斷變化的圖像.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); 
    }); 
    }); 
}); 

現在的問題是，只有一半的代碼反應如我所料 - 原始圖像淡出，但第二個從未取代它的位置。我猜它與事件發生的順序有關，但是在jQuery中有一點點小事，我不知道發生了什麼問題。

任何幫助將非常感激，因爲這是從完成地圖阻止我的最後一件事！

Answer 1

你從來沒有真正顯示元素回來一次它消失使用fadeToggle功能。 圖像交換後，您需要將其顯示出來。

---

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

嘗試：

$(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'); 
     }); 
    }); 
});