My unsolved problem in jquery animation

Question

I have written very simple image rotaror with jquery:

HTML:

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

My CSS:

.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;
}

and my jquery:

 $(document).ready(function() {

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

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

    $(this).toggleClass("active");
});

});

All thing works but i want to fade left side img.

var fade = $('> img', this);
    fade.fadeIn(250);

This line not working? What is wrong in my js code? Thanks in advance

Answer 1

how about changing fade to :

var fade = $('#' +$(this).attr('id') + ' > img');

or

var fade = $('#' +$(this).attr('id') + ' img');

Answer 2

 var fade = $('img:first', this);

This will select the first image. Or did you want to select the image's container and fade that?

To select by class name:

 var fade = $('img.g-img', this);

EDIT:

jasmine, this should work. It will select all images with class '.g-img' that are within the element that received the 'mouseover' event.

Maybe there's something else going on.

Your function should look like this:

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

    $(this).toggleClass("active");
});