Animate div and child paragraph

Animate div and child paragraph

Hi, 

I'm new to the forum and to jQuery. I couldn't find the solution to this problem on my own, I think the solution has something to do with selectors.

I animated successfully a div's border on the hover event, but would also like the child paragraph to perform an animation but with the following code I cannot isolate only the paragraph belonging to the div that's being hovered, and all paragraphs child to a div also animate.
I cannot use the this keyword here, so I'm stuck.

  1. var jq=jQuery.noConflict();

  3. jq(document).ready(function()
  4. {
  5. jq("#container div").hover(function()
  6. {
  7. jq(this).stop(true,true).animate({
  8. width:'-=20',
  9. height: '-=20',
  10. borderLeftWidth: '+=10',
  11. borderTopWidth: '+=10',
  12. borderRightWidth: '+=10',
  13. borderBottomWidth: '+=10'}, 300);
  14. },
  15. function(){jq(this).stop(true,true).animate({
  16. width: '+=20',
  17. height: '+=20',
  18. borderLeftWidth: '-=10',
  19. borderTopWidth: '-=10',
  20. borderRightWidth: '-=10',
  21. borderBottomWidth: '-=10'}, 600);});
  23. jq("#container div").hover(function()
  24. {
  25. jq(this).find('#container p').stop(true,true).animate({
  26. marginTop:'-=5'}, 300);
  27. },
  28. function(){jq(this).find('#container p').stop(true,true).animate({
  29. marginTop:'+=5'}, 600)});
  30. });