Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Christopher Borchert
14,814 PointsWhy 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
Ricardo Hill-Henry
38,442 Points.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
14,814 PointsThanks 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?"
Ricardo Hill-Henry
38,442 PointsWhen .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
14,814 PointsThanks, 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.
Christopher Borchert
14,814 PointsChristopher Borchert
14,814 PointsThank 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.