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

Question

我无法让字幕/叠加层的动画工作。我希望标题在幻灯片进出时从底部上下滑动。我尝试了很多东西，但无法正常工作。我的幻灯片由 div 而非图像组成。不确定我是否将标题的 HTML 放在了正确的位置。我包含了 caption2 插件。

Jsfiddle

<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>

Jsfiddle

提前感谢您的帮助。

Answer 1

从 cycle-caption 中删除“测试”文本并将其放入 cycle-overlay 中，使其与其他幻灯片保持一致。那么这个javascript应该让你开始:

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

您可能需要尝试一下。 http://jsfiddle.net/w95ya/1/

检查此链接以查看您可以监听哪些事件:http://jquery.malsup.com/cycle2/api/