Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS jQuery Basics (2014) Introduction to jQuery What is jQuery?

Christopher Borchert
Christopher Borchert
14,814 Points

Why does the warning slide in when I .show("slow") it?

I checked the css of the page to see if there was a transition, but there was not, and it doesn't seem like we're changing the location of the warning. I read in the documentation that "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." Is it the case .hide() basically moves the element to (0, 0) in addition to reducing the opacity?

2 Answers

Hi Christopher,

I don't think the position of it is changed at all. The width and height are reduced to zero so that it takes up no space then it is removed from the document flow with display: none; It's no longer part of the rendered page and does not affect other elements.

Christopher Borchert
Christopher Borchert
14,814 Points

Thank you. I was wondering about the fact that in the example provided in the video, a paragraph element seems to slide in from the corner if you hide then show('slow') it. I think I've found the answer though.

It seems that, in addition to reducing width and height to 0, it reduces the margins to zero, giving a single element which has been given position using margin: 0 auto; the appearance of sliding off to the left of the screen, as the size diminishes.

.hide() changes changes your elements css display property to none. When the display property is set to none, the element no long appears on the screen; it opacity is at 0%. Javascript adds a handle to your CSS, but doesn't need to do so using CSS transitions. It directly targeted your element's display property and said "go away'.

display: none;

Now, there are some JQuery methods that can slide an element off the screen by maxing it's x position negative; but that's not the case here.

Now, I'm not really sure what you're asking in the title of this thread...

Christopher Borchert
Christopher Borchert
14,814 Points

Thanks for the response. I sorry, if the question seems off. It is in response to a specific exercise. My question is: "In addition to the opacity, do hide and show alter the position of the element?"

When .hide() is used with no parameters, it's display is set to none. When you pass in a parameter such as "fast" or "slow", this affects the elements height and width; not it's x and y coordinates. So if you had a square on a plane with the coordinates (4,0) (4,8) (0,0) (0,4) you'd likely end up with an element with all 4 points at (0,0) (assuming). The JQuery documentation doesn't exactly specify how the height and width increase in decrease; but says they do infact do so.

Here's what it says:

  • With no parameters, the .hide() method is the simplest way to hide an element:

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.

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.*

Christopher Borchert
Christopher Borchert
14,814 Points

Thanks, again. I think I figured it out: I think it has to do with margins also being reduced as the dimensions are reduced so that the position of the element appears to change to the uninitiated like me.