More code than I can see?

Question

So I started on learning jQuery now. When I preview my code/given code the "it's a trap" comes in from the left and to the center and expand a little. There's nothing in the code that make it do that. Is there some code that I can't see or what's the deal here. It can't do that from itself. I thought it would have a static position and then slowly be visible. Css:

body {
background: #2d3339
}
.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;
 }
.image {
position: absolute;
top: 20%;
width: 100%;
text-align: center;
z-index: -1
}

jQuery

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

Html

<!DOCTYPE html>
<html>
<head>
<title>Take Evasive Action</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<p class="warning">
<span>It's A Trap!</span>
</p>
<div class="image">
<img src="img/ackbar.gif" />
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Answer 1 · 2014-09-10T12:14:17Z

September 10, 2014 12:14pm

Its the show() that gives that effect. The p starts hidden when you enter the page

//hide warning
$(".warning").hide();

and then becomes visible

//show warning slowly
$(".warning").show("slow");

since the default display on a p is block, it fills the full width of the page, but since your are doing it slowly, it takes 600 milliseconds to fill it up. The p has a margin:100px auto20px property so the span is always centered during the transition.

Welcome to the Treehouse Community

Looking to learn something new?

jne

jne

More code than I can see?

1 Answer

Hugo Paz

Hugo Paz