全屏模式淡出不起作用

Question

我正在一個頁面上使用多個全屏模式，但我似乎無法讓它們淡入。相反，它們在一個角度下滑入/滑出。我試圖讓他們淡入/淡出，而不是滑動，無濟於事。

歡迎任何建議，謝謝。

的jsfiddle：http://jsfiddle.net/mk9ek9wt/

HTML

<li> <a href="#" class="open" data-target='A1'>test1</a></li> 
    <li> <a href="#" class="open" data-target='A2'>test2</a></li>  



<div class="container A1"> 
    <p> 
     <a href="#" class="close">close</a> 
    </p> 
    <p class="changeText"> 
content 1 
    </p> 
</div> 
<div class="container A2"> 
    <p> 
     <a href="#" class="close">close</a> 
    </p> 
    <p class="changeText"> 
content 2 
    </p> 
</div> 
<div class="overlay"></div> 

CSS

.overlay { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:10; 
    height:100%; 
    width:100%; 
    background:#000; 
    filter:alpha(opacity=60); 
    -moz-opacity:.60; 
    opacity:.60; 
    display:none; 

} 
.container { 
    position:fixed!important; 
    position:absolute; 
    height:200px; 
    width:400px; 
    margin:-100px 0px 0px -200px; 
    top: 50%; 
    left: 50%; 
    color:white; 
    display:none; 
    z-index:1002; 
    padding:10px; 
} 

JS

$(document).ready(
    function() { 
     $('.open').click(
      function() { 
       var target=$(this).data('target'); 
       $('.overlay').show('slow', 
        function() { 
         $('.container.'+target).fadeIn('slow'); 

        } 
       ); 
      } 
     ); 
     $('.close').click(
      function() { 
       $(this).parents('.container').hide('slow', 
        function() { 
          $('.overlay').fadeOut();   
        }  
       ); 
      } 
     ); 
    } 
); 

Answer 1

使用淡入上.overlay

$('.overlay').fadeIn('slow', 
    function() { 
     $('.container.'+target).fadeIn('slow'); 
    } 
); 

和.container

$(this).parents('.container').fadeOut('slow', 
    function() { 
     $('.overlay').fadeOut();   
    }  
);