javascript .hide direction change

Question

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.

Please elaborate, add all relevant tags, no tags in title, post code, live example. What have you tried so far? What failed? — elclanrs, Aug 03 '13 at 23:20
This is a duplicate http://stackoverflow.com/questions/3282047/jquery-animate-to-hide-and-show-elements-by-sliding-left-and-right?rq=1 — SteveKB, Aug 03 '13 at 23:21
there is no hide function that takes in a duration in javascript without jquery. (unless you write it yourself) — SteveKB, Aug 03 '13 at 23:38
Everybody's given you suggestions (animate, position:absolute, the other SO post) but you seem to find problems with all of them, @TonyVentura! Complaining is not very attractive. Do some work, try them out, pick one & be happy. — Thomas W, Aug 04 '13 at 03:31
I am not complaining, just curious :) and the answer from @JonathanLonowski was exactly what I was looking for. — Tony Ventura, Aug 04 '13 at 04:52

Jonathan Lonowski · Accepted Answer · 2013-08-04T00:23:04.870

1

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/

edited Aug 04 '13 at 00:23

answered Aug 04 '13 at 00:16

Jonathan Lonowski

121,453
34
200
199

What about without changing the location of it. And if I need the class to have a relative position, – Tony Ventura Aug 04 '13 at 00:23
@TonyVentura It will need `position: absolute` (or `fixed`) to affect the animation. But, you can wrap it in a parent element with `position: relative` to hold it to a particular location. Though, you may want to also animate the `height` of the parent as well. http://jsfiddle.net/mFN9W/ – Jonathan Lonowski Aug 04 '13 at 00:28

iConnor · Answer 2 · 2013-08-03T23:36:00.100

0

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/

edited Aug 03 '13 at 23:36

answered Aug 03 '13 at 23:29

iConnor

19,997
14
62
97

I really like the .hide() function cause I find it a lot more smooth and buggy. the animate has problems on mobile devices for me where as the .hide has none. – Tony Ventura Aug 03 '13 at 23:49

score 0 · Answer 3 · answered Aug 04 '13 at 01:43

0

Try this.

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

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

answered Aug 04 '13 at 01:43

Mr. Smee

968
11
28

javascript .hide direction change

3 Answers3