javascript - 同时显示一组图像的淡入和淡出

Question

JQUERY

  var images=new Array('images/pipe.png','images/pipe1.png','images/pipe2.png');
                        var nextimage=0;

                        doSlideshow();

                        function doSlideshow()
                        {
                            if($('.slideshowimage').length!=0)
                            {

                                $('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
                            }
                            else
                            {
                                 //alert("slide");     
                                slideshowFadeIn();
                            }
                        }
                        function slideshowFadeIn()
                        {
                            $('.leftImage').prepend($('<img class="slideshowimage"     src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1300);}));
                            if(nextimage>=images.length)
                            nextimage=0;
                        }

HTML

 <div class="leftImage">
            <span class="imageTxt">WISHING ALL  EMPLOYEES<br>A HAPPY &AMP; PROSPEROUS <br> NEW YEAR!</span>
       </div>

如何同时显示淡入淡出幻灯片效果，类似http://www.hdfcbank.com/中的那个。 请帮忙

Answer 1

为此，您应该使用 jQuery 的 queue功能:

$('.one').fadeOut(500, queue:false);
$('.two').fadeIn(500, queue:false);

设置 queue:false，jQuery 将(几乎)同时执行这两个函数。

在您的代码中，您有:

$('.slideshowimage').fadeOut(500,function({slideshowFadeIn();$(this).remove()});

您正在排队:

1. 首先在.slideshowimage上执行.fadeOut
2. 之后:fadeIn 新的:,function({slideshowFadeIn();$(this).remove()}

因此您明确地对事件进行了排队:fadeIn 只会在 fadeOut 之后发生。

---

要使您的代码出列，请尝试以下操作:

// Executing both fadeOut and fadeIn at the same time:
$('.slideshowimage').fadeOut(500, function() { $(this).remove() }); 
slideshowFadeIn();

并将其替换为代码段中的这行代码: $('.slideshowimage').fadeOut(500,function({slideshowFadeIn();$(this).remove()});