0

更新：找到了解决方案，见下文。

我正在尝试让单击的磁贴 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 内部，我猜测正在应用包装器 div 时正在发生一些事情，但这有点超出我的想象。有什么建议么？

这是我的 CSS3 效果的 jsFiddle，它显示了所需的外观：http: //jsfiddle.net/dex3703/n2RJs/

谢谢！

4

2 回答 2

0

除了动画比例，您还可以动画 div 的宽度和高度。

$(this).animate({

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

}, 200, function() {

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

});

我也有这个问题。这是它的外观演示：单击一个正方形：我的站点

于 2012-04-17T17:47:56.817 回答
0

找到了一个解决方案——在 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>
于 2012-04-19T17:49:55.350 回答