jquery - jQuery Cycle插件帮助

我正在尝试使用jQuery Cycle插件构建滑动旋转器，但是在我需要的自定义显示上遇到了一些麻烦...基本上我有幻灯片，并且在每张幻灯片的顶部都有一个带有文本的文本框。我只希望幻灯片滑动，但是我希望文本淡出，然后在新幻灯片插入时淡入。

这是我的HTML：

<div id="home-slider">
     <div class="slide">
          <img src="image.jpg" width="200" height="200" />
          <div class="text-box">
               <p>Some text here</p>
          </div>
     </div>
     <div class="slide">
          <img src="image.jpg" width="200" height="200" />
          <div class="textblock">
               <p>Some text here</p>
          </div>
     </div>
</div>

这是JS：

function onBefore() {
    jQuery("#home-slider .slide .textblock").hide();
}
function onAfter() {
    jQuery("#home-slider .slide .textblock").fadeIn('fast');
}
jQuery("#home-slider").cycle({
        speed:  500,
        timeout: 3000,
    after:   onAfter,
    before: onBefore

});

因此，当我希望它们只是淡入/淡出时，幻灯片可以正常工作，但文本也随之滑动。

任何的想法？

最佳答案

要进行滑动，必须将fx属性设置为'scrollHorz或scorllVert。看一下这个工作演示。 Aslo，您的班级名称中有一些错字。

Demo