如何縮小包含文本的div？

Question

我試圖在鼠標點擊時縮小50％的圓圈。我通過使用jQuery UI的縮放效果做到了這一點。

股利是

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

JS的是

var percent = 0.5; 

$('#circle').click(function() { 
    var height = $(this).height(); 
    var width = $(this).width(); 
    var centerX = $(this).position().left + $(this).width()/2.0; 
    var centerY = $(this).position().top + $(this).height()/2.0; 
    $(this).effect("scale", { percent: percent * 100 }, 1000, function() { 
     var newTop = centerY - (height * percent)/2.0; 
     var newLeft = centerX - (width * percent)/2.0; 
     $('#circle').offset({ 'top': newTop, 'left': newLeft }); 
     $('#circle').css({'height': height * percent, 'width': width * percent }); 
    }); 
}); 

這段代碼的工作，直到我說圓上一些文字像

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

標題並縮小與圓形，但完成後恢復到原來的大小，並使圓形成橢圓形。請嘗試這個小提琴：http://jsfiddle.net/marsant/Ycakg/

除了手動調整完成回調之外，有沒有一種簡潔的方法來解決這個問題？謝謝！

Answer 1

你可以做一個快速解決方案通過將是這樣的：

$(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('*')：拿到圓格
• .filter(function(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的解決方案或改變你的整個腳本位。我會看，1秒......

WORKING EXAMPLE

---

使用ANIMATE做這一切只需：

$('#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。我想改變.circle有位置relative和移動font-size: 80px;到.circle：

.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'; 
} 

WORKING EXAMPLE