Question

我用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>

我的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;
}

和我的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");
});

}）;

一切正常但我想淡化左侧img。

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

此行不起作用？我的js代码有什么问题？提前致谢

Answer 1

如何将淡入淡出更改为：

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

或

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

Answer 2

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

这将选择第一张图片。或者你想选择图像的容器并淡化它？

按类名选择：

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

编辑：

茉莉花，这应该有效。它将选择所有带有“.g-img”类的图像，这些图像位于接收“鼠标悬停”事件的元素内。

也许还有其他事情发生。

您的功能应如下所示：

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

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

我在jquery动画中未解决的问题

2 个答案: