【问题标题】:How to Slide Element Right to Left by jqueryjquery如何将元素从右向左滑动
【发布时间】:2015-08-17 02:22:42
【问题描述】:

尝试通过 jquery 将 p 从右到左方向滑动到此 slider。此滑块默认具有淡入淡出效果,我正在尝试为滑块的 p 描述赋予 slideLeft 效果,不是整个滑块元素

HTML:

<div id="headslide">
    <ul>
        <li class="post-content">
            <div class="slidshow-thumbnail">
                <a href="#">
                    <img src="http://3.bp.blogspot.com/-h4-nQvZ5-VE/VQ3HLtSS3ZI/AAAAAAAABIc/iaOda5zoUMw/s350-h260-c/girl_with_winter_hat-wallpaper-1024x768.jpg" height="260" width="350"/>
                </a>
            </div>
            <span class="content-margin">
          /* Description */
         <p>Cicero famously orated against his p...</p>
                /* Title */
                <h3><a href="#">Download Premium Blogger Templates</a></h3>
                <span class="info">Info</span>
            </span>
        </li>

        <li class="post-content">
            <div class="slidshow-thumbnail">
                <a href="#">
                    <img src="http://3.bp.blogspot.com/-YfkF1u_VB40/VWr5dYf00gI/AAAAAAAABW8/wv2e-Lu4etw/s390-h340-c-h340-c/11071467_807062866056131_872486685669967339_n.jpg" height="260" width="350"/>
                </a>
            </div>
            <span class="content-margin">
         /* Description */
        <p>SEO friendly Flat style Custom Fonts.</p>
                /* Title */
                <h3><a href="#">Modern with a pixel-perfect eye</a></h3>
                <span class="info">Info</span>
            </span>
        </li>
    </ul>
</div>

请看这个Fiddle >>。我正在尝试通过 jquery 来做到这一点。

我试过这个
$(".content-margin").delay(400).show("p", { direction: "left" }, 1200);

不工作,如何只为 p 元素赋予 slideLeft 效果,有什么建议吗?

【问题讨论】:

    标签: javascript jquery slide right-to-left


    【解决方案1】:

    headslide 滑块支持可用于隐藏/滑动“p”元素的回调。

    $('#headslide ul').cycle({
       timeout: 4000,
       pager: '#headslide .pager',
       after: function(currSlideElement, nextSlideElement, options, forwardFlag){
           $(nextSlideElement).find("p" ).hide();               
           $(nextSlideElement).find("p" ).toggle("slide");       
           return false; 
    }
    

    jfiddle:http://jsfiddle.net/bacec898/7/

    参考:http://jquery.malsup.com/cycle/options.html

    【讨论】:

    • Ans 将被接受,但如何从左滑或右滑?
    猜你喜欢
    • 2011-03-12
    • 2015-08-25
    • 1970-01-01
    • 1970-01-01
    • 2018-05-16
    • 1970-01-01
    • 2015-05-11
    • 2012-12-08
    • 1970-01-01
    相关资源
    最近更新 更多