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

如何使div滑入jQuery

2 个答案: