jquery - 如何使 div 滑动到位 jQuery

Question

我试图在<div>调用函数时将幻灯片滑入屏幕。此刻，我有它，所以它会在点击时出现在屏幕上。有谁知道怎么让它滑进去？*如果它也可以滑出，那将是一个很大的优势。

Javascript：

function show() {
    var website = document.getElementById('website');
    website.style.left = '0%';
}

HTML：

<a href="javascript:;" onclick="show()" style="color:#999;">Superman - Wikipedia, the    free encyclopedia</a>
<div id="website">

</div>

CSS：

#website {
    height: 100%;
    position: fixed;
    background: #666;
    width: 100%;
    left: 100%;
}

Answer 1

检查此演示http://jsfiddle.net/yeyene/TLtqe/

它会滑入也滑出。

$('a').on('click',function() {
    if($('#website').css('left')=='0px'){
        $('#website').animate({left: '-100%'}, 1000);        
    }else{
        $('#website').animate({left:0}, 1000); 
    }
});

Answer 2

HTML：

<a id="show" style="color:#999;">Superman - Wikipedia, the free encyclopedia</a>

jQuery：

$('#show').click(function(e) {
    e.preventDefault();
    $('#website').animate({
        left: 0
    }, 5000);
});

jsFiddle