使用jquery滑入/滑出

Question

我把我的div作为

<div id="summary" style=" width: 900px; margin: 0 auto;" >
    HTML content
</div>
<div id="details" style=" width: 900px; margin: 0 auto; display: none;" >
    Detail content
</divs>

我的jquery代码就像

$('#button').click( function() {
    $('#details').show('slide', { direction: 'right' }, 1000);
    $('#summary').hide('slide', { direction: 'left' }, 1000);
});

实现此功能时,div#summary左侧的滑出触摸显示器显示屏的边缘,div#details从右侧滑入而不是从显示器边缘滑入.

我希望div#details从最右边滑入,这样看起来div正从屏幕外滑入.

我该怎么做？

Answer 1

您需要先将其放在屏幕上,然后尝试动画而不是使用滑动功能:

HTML:

<div id="summary" >
    HTML content
</div>
<div id="details">
    Detail content
</div>

<div id="button">click me</div>

CSS:

body {
    overflow:hidden;
}

div#button {
    cursor:pointer;
}

div#details {
    position:absolute;
    left:2000px;
    top:100px;
    width:200px;
    background-color:#CCC;
}

div#summary {
    position:absolute;
    left:-500px;
    top:50px;
    width:200px;
    background-color:#CCC;
}

JQuery的:

$('#button').click( function() {
    $('#details, #summary').animate({left:'200px'});
});

工作示例:http://jsfiddle.net/7e92Y/