CH4-1(模組化)FB右側滑動視窗

HTML

<div class="fb">
    <div class="fb-btn">
    <!--FB按鈕圖片-->
        <img src="/ezfiles/312/1312/img/2214/fb.png" alt="">
    </div>
    <div class="fb-box">
    <!--崁入粉絲團-->
        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fkiwi.daycare%2F%3Ffref%3Dts&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=true&appId=863452537101244" width="320" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
    <!--手機版的關閉按紐-->
        <div class="btn-close">x</div>
    </div>
</div>

CSS

.fb {
    position: fixed;
    right: 0;
    top: 20%;
    z-index: 1000;
}
.fb-btn{
    width: 40px;
}
.fb-btn img{
    width: 100%;
}
.fb-btn:hover {
    cursor: pointer;
}

.fb-box {
    position: absolute;
    right: -1500%;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    z-index: 50;
    top: 0%;
    background: #fff;
}

.fb-box.move {
    right: 0%;
    z-index: 999;
}

.btn-close {
    position: absolute;
    right: 0;
    top: -10px;
    border-radius: 50%;
    background: #3a5897;
    padding: 1.5% 4%;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}
.btn-close:hover {
    cursor: pointer;
}
@media screen and (min-width: 769px) {
    .btn-close {
        display: none;
    }
}
@media screen and (max-width:768px) {
    .btn-close {
        display: block;
    }
}

JS

//如果是電腦版本，滑鼠移入展開
if ($(window).width() > 768) {
    $('.fb').hover(function() {
        $('.fb-box').toggleClass("move");
    })
} else {
    $('.fb').click(function() {
        $('.fb-box').toggleClass("move");
    })
}
//手機版本透過點擊展開或關閉
$(function() {
    $('.btn-close').click(function() {
        $('.fb').toggleClass('move');
        $('.fb-btn').show(300)
    })
});