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

展开div回到原来的位置

Expand div come back to original position

javascript

css

jquery

expand