縮小/放大按鈕效果？

Question

更新：找到了解決方案，請參見下文。

我正在嘗試使單擊的圖塊div進行快速的收縮/增長過渡，因此用戶對單擊該圖塊有一些反饋。 我發現使用CSS3動畫很容易做到這一點，但希望使用jQuery替代方法，使其可以在IE8 / 9中使用。

jQueryUI effect（'scale'）似乎是一個不錯的選擇。 由於圖塊具有大量文本內容，因此看起來會更好，並且僅對寬度/高度/頂部/底部使用animate（）不會縮放該內容，而只是將其壓縮在一起。

我有一個有效的示例，除了單擊的圖塊在收縮和增長階段之間跳躍之外。 尋找有關如何使瓷磚重新長出一點點跳動的建議。

這是我的工作示例（很抱歉，沒有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內部查看，我猜想應用了wrapper div時會發生某些事情，但這超出了我的范圍。 有什么建議么？

這是我的CSS3效果的jsFiddle，它顯示了所需的外觀： http : //jsfiddle.net/dex3703/n2RJs/

謝謝！

Answer 1

除了設置比例動畫之外，還可以設置div的寬度和高度的動畫。

$(this).animate({

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

}, 200, function() {

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

});

我也有這個問題。 這是外觀的演示：單擊正方形： 我的網站

Answer 2

找到了解決方案-在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>