jQuery的覆蓋插件

Question

我建立一個小的重載插件用於即將開展的項目，下面的代碼工作有一點瑕疵的：

$(document).ready(function() 
    { 

     var clickable_link = $('.p_wrapper p'), 
      overlay = $('#overlay'), 
      close_overlay = $('.close_overlay'); 

     clickable_link .click(function(evt){ 
      evt.preventDefault(); 
      //if there is no content 
      current_link = $(this).attr('class'); 
      var overlay_content = $('#'+current_link); 
      overlay.children().fadeOut(500, function(){ 
       overlay_content.fadeIn(); 
      }); 
      overlay.fadeIn(); 
     }); 

     overlay.click(function(){ 
      overlay.fadeOut(); 
      overlay.children().fadeOut(500); 
     }); 
    }); 

如果我點擊了第一次「clickable_link」這一切都很好，但如果我保持疊加打開，然後再次點擊'clickable_link'，疊加fadesOut的第一個內容，然後新的淡入淡出，但一個接一個地不在同一時間（這將看起來更好，更平滑）Full code here

Answer 1

您可以存儲最後點擊的鏈接：http://jsfiddle.net/PWV3q/15/

$(document).ready(function() { 

    var clickable_link = $('.p_wrapper p'), 
     overlay = $('#overlay'), 
     close_overlay = $('.close_overlay'); 

    overlay.hide(); 
    var lastLink = null; 
    clickable_link.click(function (evt) { 
     evt.preventDefault(); 
     if (lastLink != this) { 
      lastLink = this; 
      //if there is no content 
      current_link = $(this).attr('class'); 
      var overlay_content = $('#' + current_link); 
      overlay.children().fadeOut(500, function() {}).promise().done(function() { 
       overlay_content.fadeIn(); 
      }); 
      if (!overlay.is(':visible')) overlay.fadeIn(); 
     } 
    }); 

    overlay.click(function() { 
     overlay.fadeOut(); 
     overlay.children().fadeOut(500); 
    }); 
});