Question

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

我正在尝试获取一个单击的tile div来进行快速缩小/增长转换，因此用户可以获得点击该tile的一些反馈。我发现这很容易用CSS3动画，但想要一个jQuery替代品，所以它适用于IE8 / 9。

jQueryUI效果（'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/

谢谢！

Answer 1

您也可以为div的宽度和高度设置动画，而不是动画比例。

$(this).animate({

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

}, 200, function() {

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

});

我也有这个问题。以下是它的外观演示：单击一个方块：My Site

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>

按下按钮缩小/增大刻度效果？

2 个答案: