Javascript JQUERY淡入淡出幻灯片，中间不带白色

我在Wordpress网站上有一个幻灯片。我正在尝试找出如何使图像淡入淡出，使其在图像之间淡入淡出，而不是先淡入白色背景色，然后淡入图像。在我的情况下，如何做到这一点，请参见下文

javascript:

    <script type="text/javascript">
        $(function () {
            var imgsrc = '';
            imgsrc = $('.pikachoose').css('background-image');

            $('ul.slideshow-menu').find('a').hover(function () {
                var newImg = $(this).attr('src');
                $('.pikachoose').stop().fadeOut('slow', function () {
                    $(this).css({
                        'background-image': 'url(' + newImg + ')'
                    }).fadeTo('fast', 1);
                });

            }, function () {
                $('.pikachoose').stop().fadeOut('slow', function () {
                    $(this).css({
                        'background-image': imgsrc
                    }).fadeTo('fast', 1);
                });
            });

        });
    </script>

$（函数（）{
var imgsrc=“”；
imgsrc=$（'.pikachoose'）.css（'background-image'）；
$（'ul.slideshow menu'）。查找（'a'）。悬停（函数（）{
var newImg=$（this.attr（'src'）；
$（'.pikachoose'）.stop（）.fadeOut（'slow'，函数（）{
$（this.css）({
“背景图像”：“url（“+newImg+”）”
}).fadeTo（“快速”，1）；
});
}，函数（）{
$（'.pikachoose'）.stop（）.fadeOut（'slow'，函数（）{
$（this.css）({
“背景图像”：imgsrc
}).fadeTo（“快速”，1）；
});
});
});

HTML：

<div id="slideshow-main">
  <ul class="slideshow-menu">
   <li class=""><a title="Support / Beheer" href="/supportenbeheer" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-4.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-4.jpg" alt="2Eenheid"/><span>Support / Beheer</span></a></li>
   <li class=""><a href="/implementatie" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-5.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-5.jpg" alt="2Eenheid"/><span>Implementatie</span></a></li>
   <li class="current_page_item"><a href="/cloud" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-11.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-11.jpg" alt="2Eenheid"/><span>Cloud</span></a></li>
   <li class=""><a href="/webhosting-en-hosting" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-8.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-8.jpg" alt="2Eenheid"/><span>Webhosting / Hosting</span></a></li>
   <li class=""><a href="/unit4-multivers" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-2.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-2.jpg" alt="2Eenheid"/><span>Unit4 Multivers</span></a></li>
  </ul>
  </div>        
</div>  

尝试将类

pikachoose

的不透明度设置为1

.pikachoose 
{
  opacity:1 !important;
}

使用z索引执行此操作

CSS

JQUERY

function cycleImages(){

      var $active = $('#slideshow .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#slideshow img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
          $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }
$(function(){
    setInterval('cycleImages()', 10000);
});

---

谢谢，我有，但现在它不再褪色了。（效果见网站）褪色意味着一幅图像的不透明度从1降低到0，下一幅图像的不透明度从0增加到1…在问题中，yiu提到你不需要褪色…所以我给出了这个解决方案…我不知道你期望的褪色是什么？哦，我确实想保持褪色，但中间没有白色背景。我用Toggle打错了。编辑它..褪色的beaviour就是这样..你可能想要一些其他的动画..不要褪色

function cycleImages(){

      var $active = $('#slideshow .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#slideshow img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
          $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }
$(function(){
    setInterval('cycleImages()', 10000);
});