jQuery Cycle 插件帮助

Question

我正在尝试使用 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

});

所以幻灯片工作正常，但当我希望它们淡入/淡出时，文本会随之滑动。

有什么想法吗？

Answer 1

要滑动，您必须将 fx 属性设置为“scrollHorz”或scorllVert。看看这个工作演示。另外，您的类名中存在一些拼写错误。

<强> Demo