jQuery 淡入问题

Question

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

我使用的画廊脚本可以在 这里

每当我应用 .fadein(slow) 时，我都会得到想要的效果但相反。而不是从透明褪色到不透明::: 你得到了图片。我也尝试

.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。 0.5。