Q:

Getting two separate divs to delay at once

I am running into two separate issues.

I want two divs to start delaying at the same time. My text-button div does not delay at all.
I am trying to get my text-button div to animate up within the parent div 'gray' 100px, but it moves the parent div instead of the text-button div.

What am I doing wrong for this not to work?

$(function(){
$('#text').delay(1000).fadeIn(2200);
$('#text-button').delay(2000).fadeIn(2200);
$('#text-button').animate({'margin-top': '50px'}, 1000);
});
.gray {
  background-color: #CCC;
  width: 100%;
  height: 500px;
 }
#text {
  color: blue;
  display: none;
  text-align: center;
  position: absolute;
  margin: 0 25%;
  top: 40%;
  font-size: 1.3em;
 }
 #text-button {
   position: relative;
   border: 1px solid red;
   wdith: 100%;
   /*display: inline;*/
   line-height: 2em;
   padding: 0 10px;
   text-align: center;
   top: 90%;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gray">
  <div id="text">text delay.</div>
  <div id="text-button">text delay 2</div>
</div>

A:

The problem isn't the delay, it's that the div isn't hidden initially with css - so the fadeIn has no affect.
The problem with moving the div is that you are using a relative positioning with top and then trying to change the margin. There are several ways you could do this. One would be just to change top instead.
To make the border for the bottom text not go all the way across, I would just wrap it in a span and put the border/padding css on that...
All together something like this:
JSFiddle
$(function() {
  $('#text').delay(1000).fadeIn(2200);
  $('#text-button').delay(2000).fadeIn(2200);
  $('#text-button').animate({
    'top': '80%'
  }, 1000);
});

.
.gray {
  background-color: #CCC;
  width: 100%;
  height: 300px;
}

#text {
  color: blue;
  display: none;
  text-align: center;
  position: absolute;
  margin: 0 25%;
  top: 40%;
  font-size: 1.3em;
}

#text-button {
  position: relative;
  width: 100%;
  display: none;
  text-align: center;
  top: 90%;
}

#text-button span {
  border: 1px solid red;
  line-height: 2em;
  padding: 0 10px;
}

.
<div class="gray">
  <div id="text">text delay.</div>
  <div id="text-button"><span>text delay 2</span></div>
</div>

