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

JavaScript

Posted by thomascawthorn
thomascawthorn
22,986 Points

Intro to Jquery: Why does the text move in from the top left?

Index:

<!-- inside the body -->
  <p class="warning">
    <span>It's A Trap!</span>
  </p>

css

.warning {
  border: 5px solid #e1dfbe;
  width: 200px;
  margin: 100px auto 20px;
  border-radius: 5px;
  padding: 20px 10px;
  text-align: center;
  font-size: 32px
}
.warning span {
  color: #f4f3ce;
  font-family: sans-serif;
  font-weight: bold;
}

Jquery

$(".warning").hide().show("slow");

The code above is extracted from the Introduction to Jquery badge. I understand everything, but I can't work out why the text is flying in from the top left with show(). My first thought went to a css transform - but there isn't one, nor a starting/finishing position.

The above shown all the relevant code to the element in question. To see the full code, you can download the project files here

2 Answers

Matthew Smart
Matthew Smart
12,567 Points
Matthew Smart
Matthew Smart
12,567 Points

I think that is the default behaviour of show(); . and down the line you will learn how to change this with a function inside show();.

Ive only got half way through the Jquery myself. But you could do something else like slideDown(); which will make it slide down the page

Maurits Pallesen
Maurits Pallesen
9,770 Points
Maurits Pallesen
Maurits Pallesen
9,770 Points

It is the default animation of the .show() method. If you want a different animation you should look into some other methods like fadeIn, fadeOut, slideDown, slideUp and so on. A full list can be found here: http://api.jquery.com/category/effects/