动画jQuery Cycle幻灯片的内容

每张幻灯片都由一个标题框和一个图像组成。

 
 
 
First title
 
  
 
 
 
Second title
 
  
  

我正在尝试在每张幻灯片中添加一个辅助动画，以便标题框开始滑离图像，同时整个幻灯片移开（使用Cycle默认动画）。 想要的效果在ibm网站主页（http://www.ibm.com）中可见。 我试图在’和’之前’使用Cycle的回调’：

 $(document).ready(function() { $('#slideshowWindow').cycle({ fx: 'scrollHorz', timeout: 5000, after: onAfter, before: onBefore }); }); function onAfter(cycle) { $(".slideTitle").delay(200).animate({marginLeft:"10px"}, 200 ); }; function onBefore(cycle) { $(".slideTitle").animate({marginLeft:"-400px"}, 100 ); }; 

但是这样第二张幻灯片的标题在第一张幻灯片滑落时已经可见，因为回调都应用于两个标题。 所以我无法弄清楚如何让第一个消失，第二个进入（或只是保持静止）并行。

Answer 1

这实际上会更好一些。

 function onBefore(cycle) { $(this).children("section.text").delay(300).animate({marginLeft:"35%"}, 1500); }; function onAfter(cycle) { $(this).children("section.text").delay(1300).animate({marginLeft:"-1400px"}, 1400); }; 

Answer 2

执行此操作的最佳方法是创建自己的过渡并将标题设置为动画的一部分。 它确实需要比使用onAfter和onBefore更多的工作，在这种情况下这对你不起作用。

这是一个可以帮助您入门的示例： http ： //return-true.com/2012/03/creating-a-custom-caption-transition-for-jquery-cycle/

Answer 3

迟了几个月，但希望这可能有助于其他人：

您可以使用当前元素查找其正确的子元素

 function onAfter(cycle) { $(this).children(".slideTitle").delay(200).animate({marginLeft:"10px"}, 200); }; function onBefore(cycle) { $(this).children(".slideTitle").css("marginLeft", "-400px"); };