problem selecting first

problem selecting first

Hi all,

seems I am getting crazy.
Thought I finally understood something about JQuery, now I am running into the silliest trouble with selecting the first item of an element.

This is what I have:

<div id = "menu">
    <div id="Collection" class="item firstleft">  
    <img src="images/COLLECTION.png"></img>
        <p class = "titles">
            <img src="images/title_1.png"></img>
            <img src="images/title_2.png"></img>
            <img src="images/title_3.png"></img>
            <img src="images/title_4.png"></img>
        </p>
    </div>
    <div id="Recherche" class="item secondleft"> <img src="images/RECHERCHE.png"></img></div>
    <div id="Corporate" class="item secondright"><img src="images/CORPORATE.png"></img></div>
    <div id="Contact" class="item firstright"> <img src="images/CONTACT.png"></img></div>
</div>

I tried to reach for the first img in the <p> with the class .titles.
Anything I tried with first next or whatelse does not work.
f.E.:
$(document).ready(function(){
$('.titles img:first').delay(500).animate({
    opacity: 1,
    top: '24px'
  }, 950, 'easeOutBack');
});
or:
$(document).ready(function(){
$('.titles img').first().delay(500).animate({
     opacity: 1,
     top: '24px'
   }, 950, 'easeOutBack');
});
or:
$(document).ready(function(){
$('.titles').children().frist().delay(500).animate({
     opacity: 1,
     top: '24px'
   }, 950, 'easeOutBack');
});
Nothing :-(((

But if I do:
$(document).ready(function(){
$('.titles').delay(500).animate({
    opacity: 1,
    top: '24px'
  }, 950, 'easeOutBack');
});
they all come out animated together, which I think proofs there is nothing wrong with the rest of my code.

I need help!

Thank you guys
Garavani