如何使用最小大小(jQuery)进行缩放效果

Question

当弹出窗口出现时，我正在尝试添加缩放效果。这个弹出窗口是可拖动的(多亏了jQuery(，只有最小的宽度和最小的高度，但必须而不是包含固定的大小，因为内容可以动态更改(这是一种基本弹出窗口，可以对多个弹出内容重复使用(。

我想做的是这个，但实际上我有这个

$('a.close').click(function() {
$('#box').hide('scale', {
percent: 0,
direction: 'both',
origin: ['middle', 'middle'],
}, 1000);
});
$('#show').click(function() {
$('#box').show('scale', {
percent: 100,
direction: 'both',
origin: ['middle', 'middle'],
easing: 'easeOutBounce',
}, 1000);
});

#box {
position: absolute;
background: #666666;
min-width: 200px;
min-height: 200px;
left: 100px;
top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="show" id="show" class="show" value="Show">
<div id="box" style="display:none;">
<a href="#" class="close">Close</a>
</div>

提前谢谢。Léo

Answer 1

如果从框中去掉最小高度和最小宽度，并在其中放入一个包含内容的div，则框的大小将与内容相匹配。然后，您可以设置内容的最小宽度和最小高度，而不是框。

这是你处理变化的一把叉子。

/*HTML*/
<input type="button" name="show" id="show" class="show" value="Show">
<div id="box" style="display:none;">
<a href="#" class="close">Close</a>
<div>
THIS IS SOME CONTENT
</div>
</div>
----------
/*CSS*/
#box {
position: absolute;
background: #666666;
left: 100px;
top: 100px;
}

#box div {
padding: 30px;
min-width: 200px;
min-height: 200px;
}