横からスライドイン #jQuery

横からページがスライドインしてくる。
iPhoneのメールだとかグノシーだとか、何か詳細を見ようとすると右のほうからスルスルって出てくるやつ。

なんかかっこいいじゃないですか。

ということで書いてみた。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Slide in</title>
    <style type="text/css">
    .template {
        display: none;
    }

    #slidebase {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: #c0c0c0;
        text-align: center;
    }
    #slide1 {
        background-color: red;
    }
    #slide2 {
        background-color: green;
    }
    #slide3 {
        background-color: blue;
    }
    </style>
</head>
<body>
    <div id="slidebase"></div>

    <div id="slide1" class="slide template">
        page 1
        <button slide_id="#slide2" class="slidein">&gt;</button>
    </div>
    <div id="slide2" class="slide template">
        <button class="back" slide_id="#slide2">&lt;</button>
        page 2
        <button slide_id="#slide3" class="slidein">&gt;</button>
    </div>
    <div id="slide3" class="slide template">
        <button class="back" slide_id="#slide3">&lt;</button>
        page 3
    </div>


    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    $(function () {
        $('#slidebase').setslides('#slide1', '#slide2');
        $('#slidebase').setslides('#slide2', '#slide3');

        $('.slidein').click(function () {
            var slideId = $(this).attr('slide_id');
            $(slideId).slidein();
        });

        $('.back').click(function () {
            var slideId = $(this).attr('slide_id');
            $(slideId).slideout();
        });
    });
    </script>

    <script>
    (function ($) {
        var defaults = {
            duration: 1000,
            dur_div: 3
        };

        $.fn.setslides = function (top, slides) {
            var base = this;

            base.css({
                overflow: 'hidden'
            });

            $(top).css({
                position: 'absolute',
                width: base.css('width'),
                height: base.css('height'),
                display: 'block'
            });
            base.append($(top));

            slides.split(/\s*,\s*/).forEach(function (slide) {
                $(slide)[0].slide_topslide = top;
                $(slide)[0].slide_offset = base.width();
                $(slide).css({
                    left: $(slide)[0].slide_offset + 'px',
                    position: 'absolute',
                    width: base.css('width'),
                    height: base.css('height'),
                    display: 'block'
                });
                base.append($(slide));
            });
        };

        $.fn.slidein = function (options, easing, callback) {
            var settings = $.extend(defaults, options);

            this.animate({
                left: "-=" + this[0].slide_offset + "px"
            }, settings.duration, easing, callback);

            this[0].slide_dur_div = settings.dur_div;
            $(this[0].slide_topslide).animate({
                left: "-=" + this[0].slide_offset /
                        this[0].slide_dur_div + "px"
            }, settings.duration, easing);
        };

        $.fn.slideout = function (options, easing, callback) {
            var settings = $.extend(defaults, options);

            this.animate({
                left: "+=" + this[0].slide_offset + "px"
            }, settings.duration, easing, callback);

            $(this[0].slide_topslide).animate({
                left: "+=" + this[0].slide_offset /
                        this[0].slide_dur_div + "px"
            }, settings.duration, easing);
        };
    })(jQuery);
    </script>
</body>
</html>

まだまだ練習中なので、意味もなくjQueryのプラグインぽくしてみました。
画面のresizeされるとおかしなことになりますw

animate()ってので上下のシートを適当な速さで動かしてみただけ。