CODEWITHSUNDEEP
javascriptjqueryhide
Tony Ventura
Tony Ventura

Reputation: 48

javascript .hide direction change

With jQuery there is the hide() function.

When you add a duration to the hide function like so

$('#myclass').hide(1000);
<div id="myclass">
    <p>yolo</p>
</div>

It will start from the bottom and animate up over the course of one second.

My question is how could I change the direction it will start from.

Upvotes: 1

Views: 1991

Answers (3)

Mr. Smee
Mr. Smee

Reputation: 960

Try this.

$('div').on('click', function(){
    $(this).animate({
        width: 0
    });
});

Demo: http://jsfiddle.net/e6BBA/1/

Upvotes: 0

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123423

From the docs for .hide( duration ):

When a duration, a plain object, or a "complete" function is provided, .hide() becomes an animation method. The .hide() method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.

The element only appears to be animating up and left because it's positioned by its top-left corner.

To have it animate in another direction, it'll have to be positioned on a different corner:

#myclass {
    position: absolute;
    bottom: 0;
    right: 0;
}

Example: http://jsfiddle.net/W7hqy/

Upvotes: 1

iConnor
iConnor

Reputation: 20189

You can't do this with the hide method Assuming your using jQuery you will need to use animate like so 

$('element').animate({
    marginLeft: '-400px'
}, '5000',  function(){ 
    $(this).hide() 
});

Demo: http://jsfiddle.net/e6BBA/

Upvotes: 0

Related Questions