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＆＃39; queue函数：

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

放置queue:false，jQuery将同时执行两个函数。

在您的代码中，您有：

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

在这里排队：

首先执行.fadeOut

.slideshowimage

执行此操作后：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()});

同时显示淡入和淡出图像阵列

1 个答案: