交换div框

Question

我创造了这个：

https://jsfiddle.net/1qsoL695/

HTML：

<div class="container">
    <div id="select">
        <div>ONE</div>
        <div>TWO</div>
        <div>THREE</div>
    </div>
</div>

CSS：

.container {
    background: orange;
    height: 200px;
    width: 600px;
}

#select {
    position: relative;
    overflow: hidden;
    height: 200px;
}

#select div {
    text-align: center;
    font-size: 130pt;
    margin: 0;
}

JAVASCRIPT：

$("#select")
    .on('swiperight',  function(){
        divs.eq(i).toggle('slide', {
            direction: 'right'
        }, 250, function() {

            i++;

            if(i > 2) { i = 0; }

            divs.eq(i).toggle('slide', {
                direction: 'left'
            }, 230);

        });

    })
    .on('swipeleft',  function(){
        divs.eq(i).toggle('slide', {
            direction: 'left'
        }, 250, function() {

            i--;

            if(i < 0) { i = 2; }

            divs.eq(i).toggle('slide', {
                direction: 'right'
            }, 230);

        });


    });

您可以滑动数字以显示下一个/上一个。

它应该在移动屏幕上工作，而且已经存在，我的问题是，有没有更美妙的方法来实现相同的结果？我的代码看起来很不方便。

任何帮助或提示表示赞赏。

Answer 1

我想这对于你正在寻找的东西来说会更方便：

How to hide one div and show another div using button onclick?

Answer 2

您可以使用CSS3转换和类而不是JavaScript动画来交换div。这种方法可以为您提供更高的性能并且需要更少的代码，因为您的所有JavaScript都必须切换“活动”类以显示所需的div（将其定位在屏幕上并隐藏不活动的div将它们定位在屏幕外）。