Need of optimized code for hide and show div in jQuery
<pre><code>&lt;div id="p1" class="img-projects" style="margin-left:0;"&gt;
  &lt;a href="project1.php"&gt; &lt;img src="image1.png"/&gt;&lt;/a&gt;
  &lt;div id="p1" class="project-title"&gt;Bar Crawler&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>On mouse-over I want to add an image with opacity and make the project-title shown.
So I use this code:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(function() {
        $('.project-title').hide();

            $('#p1.img-projects img').mouseover(
               function() {
                   $(this).stop().animate({ opacity: 0.3 }, 800);
                   $('#p1.project-title').fadeIn(500);
            });
            $('#p1.img-projects img').mouseout(
               function() {
                   $(this).stop().animate({ opacity: 1.0 }, 800);
                   $('#p1.project-title').fadeOut();
            });


            $('#p2.img-projects img').mouseover(
               function() {
                   $(this).stop().animate({ opacity: 0.3 }, 800);
                   $('#p2.project-title').fadeIn(500);
            });
            $('#p2.img-projects img').mouseout(
               function() {
                   $(this).stop().animate({ opacity: 1.0 }, 800);
                   $('#p2.project-title').fadeOut();
            });

    });

&lt;/script&gt;
</code></pre>

<p>The code works fine but does anyone know a way to optimize my code? </p>

<p>Thank you</p>
