jquery - 简单的 JQuery .Animate 代码

Question

我正在尝试创建一个简单的 JQuery .Animate 代码，它允许用户单击 div page1，并让 div 滑到 pagearea 的左侧，并让第二页 page2 从正确的。

$(document).ready(function() {
   $("#page1").click(function(){ 
      $("#page1").animate({right:'840px'},3000);
      $("#page2").animate({right:'840px'},3000);
   });   
});   

#page1 { width: 760px ; height: 376px ; position: absolute ; top: 0px ; left: 0px ; }
#page2 { width: 760px ; height: 376px ; position: absolute ; top: 0px ; left: 840px ; }

<div id="page1"></div>
<div id="page2"></div>

Answer 1

您将两个页面移动到相同的（绝对）位置：right: 840px. 试试这个：

$(document).ready(function() {
   $("#page1").click(function(){ 
      $("#page1").animate({right:'840px'},3000);
      $("#page2").animate({right:'0px'},3000);
   });   
});   

或者：

$(document).ready(function() {
   $("#page1").click(function(){ 
      $("#page1,#page2").animate({right:'+840px'},3000);
   });   
});   

Answer 2

工作演示

试试这个

我想这就是你需要的

你的html

<div id="website">
    <div id="background">
        <div id="midground">
            <div id="foreground">
                <div id="header">Squbo</div>
                <div id="main">
                    <div id="page1" style="right: 840px;" class='pages'>
                        <img id="page1image" src="http://www.squbo.com/index/page1.png" />
                    </div>
                    <div id="page2" style="right: 840px;" class='pages'>
                        <img id="page2image" src="http://www.squbo.com/index/page2.png" />
                    </div>
                </div>
                <div id="footer"></div>
            </div>
        </div>
    </div>
</div>

代码

$(document).ready(function () {
    $(".pages").click(function () {
        if ($(this).next('div').hasClass('pages') == true) {
            $(this).animate({
                'left': '-150%'
            }, 300, function () {

                $(this).next().animate({
                    'left': '0%'
                }, 300);


            });
        }
    });
});