Jquery dinamico para varios parrafos (p)

Hola os cuento. Quiero que al dejar el ratón encima de cada "li" el párrafo "Ver" aumente su marginTop para darle un efecto en el que el párrafo baje. El parrafo tiene un position: absolute con marginTop:-10px; para que no aparezca hasta que no pongas el ratón sobre la imagen que contiene el "li".

Pero me baja todos los parrafos a la vez. Y lo que quiero es que lo haga individualmente.

Os dejo los códigos.

Código Javascript :

$('#contain ul li').bind('mouseover', function()   {
      $('#contain ul li p').animate({marginTop:32+'px'},500);
  
   });

Código HTML :

<ul>
 <li>
   <p>Ver</p>
   <img src="prueba.png" />
</li>
<li>
   <p>Ver</p>
   <img src="prueba.png" />
</li>
<li>
   <p>Ver</p>
   <img src="prueba.png" />
</li>
</ul>

Podrías hacerlo con CSS, con :hover y transform.

si, esa solución la he barajado, pero me gustaría hacerlo con jquery por temas de compatibilidad con IE.

alguien se le ocurre alguna otra forma?

Código Javascript :

$('#contain ul li').bind('mouseover', function()   {
      $(this).find('p').animate({marginTop:32+'px'},500);
  
   });

"this" referencia el elemento que provoca el evento. Como se refiere a un <li> que es un elemento contenedor, se busca todos los elementos <p> dentro del <li> que provocó el evento y se les aplica la animación.

DriverOp tiene razón. Si no referencias el objeto al que quieres aplicar la transformación te la aplicará a todos. De hecho es lo que estás haciendo tú. Diciéndole que te mueva TODOS los párrafos.
Yo lo pondría con 'on' en vez de 'bind', eso sí, que es la forma correcta actualmente en jQuery

$('#contain ul li').on('mouseover', function() {
$(this).find('p').animate({marginTop:32+'px'},500);
});

Muchas gracias, lo pruebo y os cuento.

Gracias, solucionado!!