Jquery图像从左到右过渡并以幻灯片forms淡入

我有一个带有6个图形的幻灯片。 我想从左到右滑动前两个图形，然后第三个图形淡入并粘贴，然后从左到右滑动其余图形。 我可以创建一个具有任何效果的幻灯片，但是我如何滑入一些并淡入一些？ 以下是我的代码。

 
       
 
  $(window).load(function() { var slideContainer = $('#slider_container'), slidesHolder = $(slideContainer).children(), slideWidth = slideContainer.width(), slidePos = 0, slides = $(slidesHolder).children(), slideTotal = slides.length, currentSlide = 0, delay = 3000, slideTime = 800; $(slideContainer).css({ 'overflow': 'hidden', 'position': 'relative' }); $(slidesHolder).css({ 'position': 'absolute' }); for (var i = 0; i < slides.length; i++) { $(slides[i]).css({ 'position': 'absolute', 'top': '0', 'left': slidePos + 'px' }); slidePos = slidePos + slideWidth; } $(slidesHolder).css('width', slidePos + slideWidth); $(slides).first().clone().css({ 'left': slidePos + 'px' }).appendTo(slidesHolder); function animate() { $(slidesHolder).delay(delay).animate({ left: '-=' + slideWidth }, slideTime, function() { if (currentSlide < slideTotal - 1) { currentSlide++; animate(); } else { $(slidesHolder).css({ 'left': 0 }); currentSlide = 0; animate(); } }); } animate(); });  

Answer 1

好吧，自从你发布它以来我一直在研究这个问题，我想我已经提出了第一个问题。

我有许多弱点，但我最大的一个是.animate和动画的概念相互重叠。 所以我在这里找到了一些不错的代码，并对其进行了改编。

这个FIDDLE只是以完全相同的方式动画四个图像。

这个FIDDLE允许您通过使“距离= 0”来选择要停止的那个。

JS用“停止”

 var $imgs = $('img'); var current = 0; distance = 75; animate($imgs[current]); function animate(element) { $(element).animate( { opacity: '1', left: '+=' + distance }, 2000, function() { $(element).animate( { opacity: '0', left: '+=' + distance }, 2000, function(){ if (current < $imgs.length-1) { if (current == 1) {distance = 0;} else {distance = 75;} ++current; animate($imgs[current]); } } ); } ); } 

对我来说，教学要点是你必须在最后一个函数调用中对动画进行任何奇特的操作，否则动画会相互覆盖。

好的练习！