jquery - jQuery中的角到角显示动画？

Question

我需要为相对定位的 div 设置动画，动画从display:none;到 display:block;。我需要“缩放”它，从右下角到左上角。有没有办法做到这一点？（最好在 jQuery 中，但任何有效的东西都很好）

score 1 · Accepted Answer

我不确定您要淡入或更改元素的大小。听起来你想把它从隐藏中带出来。

由于 HTML 布局都是从顶部和左侧完成的，因此至少可以说要从右下角到左上角进行动画处理是很棘手的。

通过仔细结合slideUp与slideDown位置固定或绝对，你可以得到一个元素从下往上显示。但是我还没有听说过不使用一些非常先进的 jQuery的方法来从右向左滑动，包括前沿。

所以我提供了这个解决方案：由于你试图显示的 div 是相对定位的，你可能有某种包装器，或者一个容易放置的包装器。

使用包装器，您可以将其overflow规则设置为隐藏，然后将“隐藏”div 放置在其边界之外。

现在使用一个简单的 jQuery 动画，您可以通过在包装器的边界内重新定位它来“显示”它

这是一个例子：

HTML：

<div class='wrapper'>
    <div class='growIt'>Text for div</div>
</div>
<input type='button' id='showHide' value='Show / Hide'/>

CSS：

.wrapper{
    background:blue;
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
}
.growIt{
    background: red;
    position:relative;
    width:200px;
    height:200px;
    top:200px;
    left:200px;
    display:block;
}

jQuery：

$(function(){
    var hiding = true;
    $('#showHide').click(function(){
        if(hiding == true){
            hiding = false;
            $('.growIt').animate({top:'0px',left:'0px'},2000);    
        }else{
            hiding = true;
            $('.growIt').animate({top:'200px',left:'200px'},2000);    
        }
    });
});

当您单击按钮时，它将隐藏或显示红色 div。

如果您将其从display:noneto 设置为动画的要求display:block是因为您需要它在进入视图时将其他表单元素推开，我建议添加另一个包装器，position:relative然后使包装器从底部“向下”滑动。