Question

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

Answer 1

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

由于HTML布局都是从顶部和左侧完成的，因此从右下角到左上角设置动画是至关重要的。

谨慎地将slideUp和slideDown与固定或绝对位置相结合，you can get an element to show from the bottom up.但我没有听说过如何在不使用very advanced jQuery with bleeding edge includes. <的情况下从右向左滑动/ p>

所以我提供了这个解决方案：由于你想要展示的div是相对的，你可能有某种包装，或者很容易放置一个。

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

Now with a simple jQuery animate你可以通过将它重新定位在包装器的边界内来“显示”它

以下是一个例子：

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:none到display:block是因为您需要将其推出视图中的其他表单元素，I would suggest adding another wrapper with position:relative and then making the wrapper slide 'down' from the bottom.

Answer 2

这是你在找什么？

http://jqueryui.com/resizable/

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate

http://jqueryui.com/effect/

jQuery中的角落到角落显示动画？

2 个答案: