reveal.js框架+ javascript箭头

Question

我使用的是reveal.js框架，它可以把一个网站变成一个全页面的水平网站。

我正在尝试编写一些javascript来响应单击.Naviges左箭头和.Naviges右箭头的操作。

我发现reveal.js类名.Naviges.right.Enabled适用于右侧，.Naviges.Left适用于左侧。然而，它只响应桌面上箭头的点击，不适用于移动设备上的点击或滑动，以及桌面上的按键和触摸板滑动(这是reveal.js框架支持的)。

这里有一个简化的例子(鼠标滚动或移动滑动来查看它不工作)：http://chrisriesner.com/DT_web-experiments/DT-reveal-arrows-11-12-13/reveal-arrows-clean.html

<script type="text/javascript">
    $(document).ready(function(){
            // RIGHT ARROW 
            $(".navigate-right.enabled").click(function(){
                $('#side-column-textbox').animate({top: "-=300px"}, 1020);
                })  

            // LEFT ARROW 
            $(".navigate-left").click(function(){
                $('#side-column-textbox').animate({top: "+=300px"}, 1020);
                })      
    })
</script>

我已经尝试了很多不同的解决方案，但都没有成功，所以任何帮助都会很好！！

-thanks

Answer 1

当我了解到addEventListener函数时，我取得了一些进展，我确实必须设置一个不同的事件名称，尽管该函数是相同的，这使得它有点混乱。请在此处查看演示：http://chrisriesner.com/DT_web-experiments/DT-reveal-arrows-11-18-13/reveal-arrows-addevents.html#/

        <section >
            <h2>PAGE 0</h2>
        </section >


        <section data-state="data-event-textbox">
            <h2>PAGE 1</h2>
        </section>


        <section data-state="data-event-textbox1">
            <h2>PAGE 2</h2 >
        </section>


        <section data-state="data-event-textbox2">
            <h2>PAGE 3</h2>
        </section>


<script>

    document.addEventListener('data-event-textbox', function(){
        $('#side-column-textbox').animate({top: "-=84%"}, 1020);

    });

    document.addEventListener('data-event-textbox1', function(){
        $('#side-column-textbox').animate({top: "-=84%"}, 1020);

    });

    document.addEventListener('data-event-textbox2', function(){
        $('#side-column-textbox').animate({top: "-=84%"}, 1020);

    })
</script>

这使鼠标滚动和移动滑动在我的.animate上工作！然而，我现在的问题是，当向左滑动或单击向左时，函数应该是.animate +=84%而不是-=84%

关于如何在向左滑动/单击时触发幻灯片，以便我可以以相反的方式进行动画，您有什么想法吗？