Jquery 如何缩小包含文本的div？

我试图缩小50%的鼠标点击一个圆圈。我是通过使用jQueryUI的缩放效果来实现的

这个部门是

<div id='circle' class='circle'></div>

这段代码一直有效，直到我在圆圈上添加了一些文本，如

<div id='circle' class='circle'>
  <span class="title">Title</span>
</div>

标题

标题确实随着圆圈的缩小而缩小，但完成后又恢复到原来的大小，使圆圈变成椭圆形。请试试这把小提琴：

---

除了手动调整完成回调之外，还有什么好办法解决这个问题吗？谢谢

您可以通过添加以下内容来快速修复：

$(this).find('*').filter(function(i) { return $(this).text != "" && !$(this).children().length }).each(function(i) {
    var curSize = parseFloat($(this).css('fontSize'));
    $(this).css('fontSize', curSize / 2);
});

• $（this.find（'*'）

  ：获取圆div的所有内部元素

• .filter（函数（i）{return$（this）.text！=“”&&&&$（this.children（）.length}）

  ：将结果缩小到只有文本的内部元素，而没有其他内部元素

• .each（function（i）{

  ：开始遍历每个元素，以便更改其字体大小

• var curSize=parseFloat（$（this）.css（'fontSize'）；

  ：获取当前内部元素的当前字体大小

• $（this.css（'fontSize'，curSize/2）；

  ：将此内部元素字体设置为旧字体大小的一半

如果你想让它变得更有活力，与你的复活相匹配，你可以选择：

var curSize = parseFloat($(this).css('fontSize')),
        newSize = curSize / 2
    $(this).animate({ fontSize: newSize });

虽然如果你想让它与动画完全匹配，你可能需要找到一个CSS解决方案或者稍微改变一下你的整个脚本

---

使用动画一次完成所有操作：

$('#circle').click(function () {
    var height = $(this).height(),
        newHeight = height / 2,
        width = $(this).width(),
        newWidth = width / 2,
        fontSize = parseFloat($(this).css('fontSize')),
        newFontSize = fontSize / 2,
        newLeft = parseFloat($(this).css('left')) + (newWidth / 2),
        newTop = parseFloat($(this).css('top')) + (newHeight / 2);

    $(this).animate({ 
        height: newHeight,
        fontSize: newFontSize,
        left: newLeft,
        top: newTop,
        width: newWidth 
    });
});

注意这需要对CSS进行轻微更改。我会将

圆圈

更改为相对位置，并将

字体大小：80px；

移动到

圆圈

：

.circle {
    background:red;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    top: 10px;
    left: 10px;
    font-size: 80px;    
    position: relative;
}
.title {
    color: #fff;
    font-family:'Helvetica';
}

---

显示：表格单元格

模拟实际表格单元格的行为（所有单元格高度相等，内容无法脱离其容器/单元格，单元格没有边距，但可以有填充和边框）。此外，任何应用于显示的浮点：表格单元格元素都会取消表格单元格的效果。因此，一旦达到文本的宽度，div就无法再变窄，从而将其变成椭圆形。您需要转到其他显示设置，或按宽度/高度缩小文本。他可以切换到使用。设置动画，以便他可以一次设置宽度/高度/字体大小的动画。太糟糕了，动画承诺对象不会在每一步触发进度事件，这会让事情变得简单。问题似乎出在标题的“字体大小”上。我将其从80px改为5em。然后它似乎工作顺利。小提琴：但是如何从浮点值获取em值呢字体大小是多少？

.circle {
    background:red;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    top: 10px;
    left: 10px;
    font-size: 80px;    
    position: relative;
}
.title {
    color: #fff;
    font-family:'Helvetica';
}