jQuery淡入问题

Question

我正在尝试创建一个淡入效果使用jQuery，html和CSS，但没有效果。基本上，它是一个导航列表，使用jQuery实现画廊滚动效果。滚动到联系人链接上会弹出一个弹出窗口，其中包含服务、关于等的联系信息等。

我使用的图库脚本可以在here中找到

每当我应用.fadein(慢速)时，我会得到想要的效果，但情况正好相反。而不是从透明到不透明的褪色:你得到了图片。我也试过

.animate({opacity: '0.5'}, 1000)

与上面的结果相同

我的jOuery脚本是什么样子：

<script type>
$(document).ready(function() {
    // Image swap on hover
    $("#gallery ul li img").hover(function(){
        $('#main-img').stop().fadeTo('slow',0.3).siblings()
          .stop().fadeTo('slow',1.0).attr('src',$(this).attr('src').replace('thumb/', ''));
    });
    // Image preload
    var imgSwap = [];
     $("#gallery ul li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
</script>

html：

<div id="left_nav">
    <div id="gallery">
     <img src="images/gallery/home.png" alt="" id="main-img" />
      <ul>
        <li class="home"><img src="images/gallery/thumb/home.png" alt="" /></li>
        <li class="about"><img src="images/gallery/thumb/About Us.png" alt="" /></li>
        <li class="contact"><img src="images/gallery/thumb/Contact Us.png" alt="" /></li>
        <li class="services"><img src="images/gallery/thumb/Services.png" alt="" /></li>
      </ul>
    </div> 
  </div>

我还尝试了反转不透明度设置，因为这似乎是常识。这只会产生不透明的效果，而不会淡入。我想要的是拇指悬停状态的淡入效果。此外，淡入淡出脚本似乎不能在IE 8中工作。有什么想法？

Answer 1

哇，这里发生了一些链条。为什么你必须同时淡入同级元素(比如ul标签)？也许你是这个意思？

$('#main-img').attr('src', $(this).attr('src').replace('thumb/', '')).stop();
$('#main-img').hide();
$('#main-img').fadeIn();

它是故意解链的。出于某些原因，将hide和fadeIn调用链接在一起可能会使其在某些浏览器中停止工作，如IE。

Answer 2

我猜你必须将不透明度设置为0，然后才能淡入0.5或其他值。如果不透明度为1，并且您告诉它淡入淡出到0.5，它将从1 -> 0.5。