按下按钮缩小/增大缩放效果？

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