Corner-to-corner display animation in jQuery?

Question

I need to animate a relative-positioned div, where the animation goes from display:none; to display:block;. I need to "scale" it, starting from the bottom-right corner towards the top-left corner. Are there any ways of doing this? (Preferably in jQuery, but anything that works is good)

Answer 1

I am not sure that you want to fade in or change the size of the element. It sounds like you want need to bring it out of hiding.

Since HTML layout is all done from the top and the left, getting something to animate from the bottom right to the top left is tricky to say the least.

By carefully combining slideUp and slideDown with position fixed or absolute, you can get an element to show from the bottom up. But I have not heard of a way to slide right to left without using some very advanced jQuery with bleeding edge includes.

So I offer this solution: Since the div you are trying to show is positioned relative you probably have some kind of wrapper, or an easily place one.

With a wrapper in place you can set it's overflow rules to hidden and then place the 'hiding' div out side of its bounds.

Now with a simple jQuery animate you can bring 'show' it by re-positioning it inside the bounds of the wrapper

Here is an example:

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);    
        }
    });
});

When you click the button it will either hide or show the red div.

If your requirement of animating it from display:none to display:block is because you need it to push other form elements out of the way when it comes into view, I would suggest adding another wrapper with position:relative and then making the wrapper slide 'down' from the bottom.

Answer 2

Is this what you are looking for?

http://jqueryui.com/resizable/

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

http://jqueryui.com/effect/