jQuery淡入问题

jQuery fade in problem

本文关键字：问题 淡入 jQuery      更新时间：2023-09-26

我正在尝试使用jQuery、html&CSS无效。基本上，它是一个使用jQuery的具有图库滚动效果的导航列表。。滚动联系人链接会弹出联系人信息等服务信息。

我使用的图库脚本可以在这里找到

每当我使用.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中不起作用。有什么想法吗？

哇，这里正在进行一些链接。为什么你也要淡化兄弟姐妹（即ul标签）？也许你是这个意思？

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

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

我想在渐变为0.5或任何值之前，必须将不透明度设置为0。如果不透明度为1，并且您告诉它渐变为0.5，它将从1变为->0.5。

相关文章：