按下按鈕縮小/增大縮放效果？

Question

更新：找到一個解決方案，見下文。

我試圖讓一個點擊的瓷磚div做一個快速縮小/增長的過渡，所以用戶有一些反饋的瓷磚點擊。我發現這很容易處理CSS3動畫，但想要一個jQuery替代品，因此它可以在IE8/9中使用。

jQueryUI效果（'縮放'）似乎是一個不錯的選擇。這看起來會更好，因爲這些圖塊具有重要的文本內容，並且只使用animate（）作爲寬度/高度/頂部/底部不會縮放該內容，而只是將其壓縮在一起。

我有一個示例，除了被點擊的tile在縮小和增長階段之間跳轉。尋找如何使瓷磚長大後沒有小跳躍的建議。

這是我的工作示例（抱歉沒有的jsfiddle - 這似乎並沒有在那裏工作）：

div 
{ 
    margin: 0px; 
    background: green; 
    border: 10px solid black; 
    color: white; 

    width: 250px; 
    height: 250px; 

} 

body 
{ 
    margin: 20px; 
} 


$(document).ready(function() { 

$("div").click(function() { 

    $(this).effect("scale", {percent: 90, origin: ['middle','center']}, 125, 
     function() { 

      $(this).effect("scale", {percent: 111, origin: ['middle','center']}, 125); 
      }); 
    }); 
}); 


    <div><h1>hi</h1><p>blah</p></div> 

尋找裏面jQueryUI的我猜的東西是有包裝的div發生被應用，但它遠遠超過了我。有什麼建議麼？

這裏是一個的jsfiddle我CSS3效果，其顯示所需的外觀：http://jsfiddle.net/dex3703/n2RJs/

謝謝！

Answer 1

找到一個解決方案 - 在div縮小後添加一個具有正確佈局屬性的類，然後縮放備份。與CSS相比，它很難看，但它可以通過快速的按鈕點擊轉換。奇怪的事情必須是一些四捨五入的縮小不會恢復到原來的大小。如果你看起來不太密切，把它放到111％可以。

讚賞或建議！

.inner 
{ 
    position: absolute; 
    margin: 0px; 
    background: green; 
    border: 10px solid black; 
    color: white; 


    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

.innerpostmove 
{ 
    position: absolute; 
    top: 11px; 
    bottom: 11px; 
    left: 11px; 
    right: 11px; 

} 

body { margin: 20px;} 

.container 

{ 
    position: relative; 
    width: 250px; 
    height: 250px; 
    background: purple; 
} 

    $(".inner").mousedown(function() { 

     $(this).effect("scale", {percent: 90, origin: ['middle','center']}, 100, function() { 

     var item = $(this).addClass("innerpostmove"); 

     setTimeout(function() { 
      item.effect("scale", {percent: 111, origin: ['middle', 'center']}, 100); 
     }, 100); 

     setTimeout(function() { 
      item.removeClass('innerpostmove'); 
     }, 200); 

     }); 

    }); 


<div class="container"> 
    <div class="inner" ><h1>hi</h1><p>blah</p></div> 
</div> 

Answer 2

除了動畫縮放之外，還可以爲div的寬度和高度設置動畫。

$(this).animate({ 

    "width": "-=10", 
    "height": "+=10" 

}, 200, function() { 

    "width": "+=10", 
    "height": "+=10" 

}); 

我也有這個問題。下面是它的外觀演示：點擊一個正方形：My Site