【问题标题】:jQuery plugin cycle2 caption is not animating up and down during slideshowjQuery插件cycle2标题在幻灯片放映期间没有上下动画
【发布时间】:2014-01-05 09:01:42
【问题描述】:

我无法让字幕/叠加层的动画正常工作。我希望标题在幻灯片进出时从底部上下滑动。我尝试了很多东西,但我无法让它工作。我的幻灯片由 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

提前感谢您的帮助。

【问题讨论】:

    标签: javascript jquery html css


    【解决方案1】:

    从循环标题中删除“测试”文本并将其放入循环叠加中,使其与其他幻灯片保持一致。那么这个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/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-10-13
      • 2013-11-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多