展開div返回原始位置

Question

我制作了一個可擴展的div，現在我想當我單擊關閉按鈕時，div返回到原始位置，當我的關閉按鈕位於包含我的打開按鈕的div內時，是否可以使其變為原來的位置？ 看起來不合邏輯，但我該怎么辦？ （無論是否在div中設置了我的關閉按鈕）

有我的代碼：

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

 .button{ margin-top:20px; width:50px; height:50px; cursor:pointer; } .content{ position:absolute; width:250px; height:100px; overflow:hidden; background:red; top:50%; left:50%; margin-left:-230px; margin-top:-115px; } .button a{ text-align:left; color:grey; background:none; margin-left:0px; 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/