My unsolved problem in jquery animation
<p>I have written very simple image rotaror with jquery:</p>

<p>HTML:</p>

<pre><code>&lt;div class="left" id="main"&gt;
  &lt;ul class="gmain" &gt;
    &lt;li class="active"&gt;
      &lt;div class="gleft"&gt;&lt;img src="images/php.jpg" alt="" width="450" height="300"  class="g-img"/&gt; &lt;span class="g-span"&gt;1-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus urna nulla, et eleifend purus. Fusce nisl odio, aliquet vitae tempor sit amet, &lt;/span&gt;&lt;/div&gt;
      &lt;div class="list"&gt; &lt;a href="#"&gt;&lt;img src="images/php_thumb.jpg" alt="Image Name" height="45" width="45"/&gt; &lt;span class="title"&gt;Fusce nisl odio, aliquet&lt;/span&gt; &lt;span class="date"&gt;01.01.2010&lt;/span&gt; &lt;/a&gt; &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="gleft"&gt;&lt;img src="images/bat.jpg" alt="" width="450" height="300"  class="g-img"/&gt; &lt;span class="g-span"&gt;2-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus urna nulla, et eleifend purus. Fusce nisl odio, aliquet vitae tempor sit amet, &lt;/span&gt;&lt;/div&gt;
      &lt;div class="list"&gt; &lt;a href="#"&gt;&lt;img src="images/bat.jpg" alt="Image Name" height="45" width="45"/&gt; &lt;span class="title"&gt;Fusce nisl odio, aliquet&lt;/span&gt; &lt;span class="date"&gt;01.01.2010&lt;/span&gt; &lt;/a&gt; &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="gleft"&gt;&lt;img src="images/cat.jpg" alt="" width="450" height="300"  class="g-img"/&gt; &lt;span class="g-span"&gt;3-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus urna nulla, et eleifend purus. Fusce nisl odio, aliquet vitae tempor sit amet, &lt;/span&gt;&lt;/div&gt;
      &lt;div class="list"&gt; &lt;a href="#"&gt;&lt;img src="images/cat.jpg" alt="Image Name" height="45" width="45"/&gt; &lt;span class="title"&gt;Fusce nisl odio, aliquet&lt;/span&gt; &lt;span class="date"&gt;01.01.2010&lt;/span&gt; &lt;/a&gt; &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="gleft"&gt;&lt;img src="images/php.jpg" alt="" width="450" height="300"  class="g-img"/&gt; &lt;span class="g-span"&gt;4-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus urna nulla, et eleifend purus. Fusce nisl odio, aliquet vitae tempor sit amet, &lt;/span&gt;&lt;/div&gt;
      &lt;div class="list"&gt; &lt;a href="#"&gt;&lt;img src="images/php_thumb.jpg" alt="Image Name" height="45" width="45"/&gt; &lt;span class="title"&gt;Fusce nisl odio, aliquet&lt;/span&gt; &lt;span class="date"&gt;01.01.2010&lt;/span&gt; &lt;/a&gt; &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="gleft"&gt;&lt;img src="images/bat.jpg" alt="" width="450" height="300"  class="g-img"/&gt; &lt;span class="g-span"&gt;5-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus urna nulla, et eleifend purus. Fusce nisl odio, aliquet vitae tempor sit amet, &lt;/span&gt;&lt;/div&gt;
      &lt;div class="list"&gt; &lt;a href="#"&gt;&lt;img src="images/bat.jpg" alt="Image Name" height="45" width="45"/&gt; &lt;span class="title"&gt;Fusce nisl odio, aliquet&lt;/span&gt; &lt;span class="date"&gt;01.01.2010&lt;/span&gt; &lt;/a&gt; &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>My CSS:</p>

<pre><code>.gmain{

position:relative;
height:315px;
top:0;
left:0;
width:100%;
}
.gleft{
float:left;
width:469px;

 }
 .g-img{
position:absolute;
top:8px;
left:8px;
visibility:hidden;
 }
 .active .g-img, .active .g-span{
visibility:visible;
 }
.g-span{
position:absolute;
bottom:8px;
left:8px;
width:430px;
padding:10px;
font:normal 11px/13px verdana;
display:block;
background:#333;
color:#FFF;
visibility:hidden;
}
</code></pre>

<p>and my jquery:</p>

<pre><code> $(document).ready(function() {

$(".gmain .g-span").animate({ opacity: 0.60 }, 1 ); 

$("#main ul li").mouseover(function(){
    $("#main ul li").removeClass("active");
    var fade = $('&gt; img', this);
    fade.fadeIn(250);

    $(this).toggleClass("active");
});
</code></pre>

<p>}); </p>

<p>All thing works but i want to fade left side img.</p>

<pre><code>var fade = $('&gt; img', this);
    fade.fadeIn(250);
</code></pre>

<p>This line not working? What is wrong in my js code?
Thanks in advance</p>
