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/

使用jquery滑入/滑出

1 个答案: