Javascript jQuery插件cycle2标题在幻灯片放映期间没有上下动画

我无法使标题/覆盖的动画正常工作。我想让标题在幻灯片进出时从底部上下滑动。我做了很多尝试，但都没能成功。我的幻灯片由div组成，而不是图像。不确定我是否将标题的HTML放在了正确的位置。我包括了caption2插件

<div class="cycle-slideshow slider"
    data-cycle-slides = "> div"
    data-cycle-fx="scrollHorz"
    data-cycle-timeout="3000"
    data-cycle-caption-plugin="caption2"
    data-cycle-caption-fx-out="slideUp"
    data-cycle-caption-fx-in="slideDown"
        >

<div class="slide1 slide">
    <div class= "innerWrapper" data-cycle-title="Spring">       
        <p class ="slide1text">This is a great div Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, unde, vel ratione nulla illum libero fuga placeat corporis molestias quisquam.</p> <img class ="slide1img" src="http://dummyimage.com/300x150/000/fff&text=slide1" alt=""/>
        <br>
            <a href="" class="button">Click More</a>
     </div>
<div class="cycle-overlay">The Redwoods 1</div>
</div>

<div class="slide2 slide">
    <div class = "innerWrapper"  data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">    
        <img class ="slide2img" src="http://dummyimage.com/250x150/000/fff&text=slide2" alt=""/>    
        <p class ="slide2text">Text for slide 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, molestias incidunt ab voluptatibus id nemo error delectus sunt impedit illum.</p>
    </div>
    <div class="cycle-caption">Test</div>
<div class="cycle-overlay"></div>
</div>

</div>

这是一个伟大的事业，是一位杰出的领导者。在molestias-quisquam的自由之家，自由之地，自由之地。


红杉1号
第二张幻灯片的文本为Lorem ipsum dolor sit amet，Concetetur Adipising Elite。驱避剂、杀虫剂、杀虫剂、杀虫剂、杀虫剂、杀虫剂、杀虫剂、杀虫剂、杀虫剂、杀虫剂
测验

<div class="cycle-slideshow slider"
    data-cycle-slides = "> div"
    data-cycle-fx="scrollHorz"
    data-cycle-timeout="3000"
    data-cycle-caption-plugin="caption2"
    data-cycle-caption-fx-out="slideUp"
    data-cycle-caption-fx-in="slideDown"
        >

<div class="slide1 slide">
    <div class= "innerWrapper" data-cycle-title="Spring">       
        <p class ="slide1text">This is a great div Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, unde, vel ratione nulla illum libero fuga placeat corporis molestias quisquam.</p> <img class ="slide1img" src="http://dummyimage.com/300x150/000/fff&text=slide1" alt=""/>
        <br>
            <a href="" class="button">Click More</a>
     </div>
<div class="cycle-overlay">The Redwoods 1</div>
</div>

<div class="slide2 slide">
    <div class = "innerWrapper"  data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">    
        <img class ="slide2img" src="http://dummyimage.com/250x150/000/fff&text=slide2" alt=""/>    
        <p class ="slide2text">Text for slide 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, molestias incidunt ab voluptatibus id nemo error delectus sunt impedit illum.</p>
    </div>
    <div class="cycle-caption">Test</div>
<div class="cycle-overlay"></div>
</div>

</div>

提前感谢您的帮助。

从循环标题中删除“测试”文本，并将其放入循环叠加，以便与其他幻灯片保持一致。然后，您应该开始使用此javascript：

$( '.cycle-slideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $(incomingSlideEl).find('.cycle-overlay').slideDown();
    $(outgoingSlideEl).find('.cycle-overlay').slideUp();
});

你可能得玩一会儿。

检查此链接以查看您可以侦听哪些事件：