展開div回到原來的位置

Question

我做了一個可擴展的div，現在我希望當我點擊關閉按鈕時，div會回到原來的位置，當我的關閉按鈕位於div包含我打開的按鈕？這看起來不合邏輯，但我該怎麼做呢？ （有或沒有我的DIV中關閉按鈕）

有我的代碼：

$('.button').click(function(){ 
 
$('.intro').hide(); 
 
$('.content').animate({width: "500px",}, 500); 
 
    setTimeout(function(){ 
 
\t $('.content').animate({top: "-400px", marginBottom: "0px", height:"1000px"}, 500); 
 
    },500); 
 
\t \t \t 
 
    setTimeout(function(){ 
 
     $('.button').find('a').show(); 
 
     $('.content').find('.full').show(); \t \t  
 
    },1000); 
 
}); \t

.button{ 
 
    margin-top:20px; 
 
    width:50px; 
 
    height:50px; 
 
    cursor:pointer; 
 
    } 
 

 

 
.content{ 
 
\t position:absolute; 
 
\t width:250px; 
 
\t height:100px; 
 
\t overflow:hidden; 
 
\t background:red; 
 
\t top:50%; 
 
\t left:50%; 
 
\t margin-left:-230px; 
 
\t margin-top:-115px; 
 
} 
 

 
.button a{ 
 
\t text-align:left; 
 
\t color:grey; 
 
\t background:none; 
 
\t margin-left:0px; 
 
\t display:none; 
 
} 
 

 
.full{ margin-top:600px; 
 
    display:none; 
 
}

<div class="button"><a class="close_btn"><p>X</p></a>button</div> 
 
<div class="content"> 
 
    <div class="intro">intro</div> 
 
    <div class="full">full text lorem ipsum .... 
 
    </div> 
 
</div>

Answer 1

嘗試了這一點。我修改了一下你的代碼。您不需要使用setTimeout，因爲我們可以使用.animate提供的回調函數。

var box = $('.content'); 
var position = { 
    width: box.width(), 
    height: box.height(), 
    top: box.css('top'), 
    left: box.css('left') 
} 
$('.button').click(function(){ 
    $('.intro').hide(); 
    $('.content').animate({ 
     width: "500px", 
     top: "-400px", 
     marginBottom: "0px", 
     height:"1000px" 
    }, 500, function(){ 
     $('.button').find('a').show(); 
     box.find('.full').show(); 
    }); 
}) 

$('.close_btn').click(function(e) { 
    e.stopPropagation(); 
    $('.button').find('a').hide(); 
    box.animate({ 
     top: position.top, 
     height: position.height, 
     width: position.width 
    }); 

}); 

這裏是的jsfiddle http://jsfiddle.net/of8znvc5/5/