javascript - 展开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/