Can I optimize or improve this jQuery code? (I am new to jQuery)
<p>I am new to jQuery.. but I am trying to achieve simple effects here and there. Please look this code and tell me if I can achieve the same thing with a better approach.</p>

<p>I am trying to show a zoom button when I hover over the image and another layer which is black but faded to degree to get this common fade effect. </p>

<p>First that's my html sample:</p>

<pre><code>&lt;a href="&lt;LARGE_IMAGE_URL" class="zoom(for fancybox)"&gt;
    &lt;img src="IMAGE_SMALL_SOURCE.jpg" /&gt;
    &lt;div class="zoom-overlay"&gt;&lt;/div&gt;
    &lt;div class="zoom-black"&gt;&lt;/div&gt;
&lt;/a&gt;
</code></pre>

<p>This is the jQuery I wrote..</p>

<pre><code>// click to zoom button
$(".zoom-overlay").css({display: "none"});
$(".zoom-black").css({display: "none"});
$(".slidingposts .image").hover(function(){
    $(this).children("a").children(".zoom-black").show();
    $(this).children("a").children(".zoom-black").fadeTo(1, 0.40);
    $(this).children("a").children(".zoom-overlay").fadeIn(500);
},function(){
    $(this).children("a").children(".zoom-black").hide();
    $(this).children("a").children(".zoom-overlay").fadeOut(300);
});

$(".slidingposts .image").click(function(){
    $(".zoom-black:visible").hide();
    $(".zoom-overlay:visible").hide();
});
</code></pre>

<p>I do not know if I can achieve same results with better code. I feel it could be improved any guidance?</p>

<p>It seems to do what I want. First I want the black overlay to show then fade it a bit, then the main overlay with button appears (I styled that already) .. and whenmouse out i just hide the overlays and thats it.</p>

<p>I also put a code onclick to hide the visible overlays because it interfere with the fancybox wrap.</p>

<p>Now am I doing this right? I am newbie at this jquery :)</p>
