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