0

私はシンプルな JQuery .Animate コードを作成しようとしています。これにより、ユーザーは div の page1 をクリックし、div を pagearea から左にスライドさせ、2 番目のページ 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>
4

2 に答える 2

0

ワーキングデモ

これを試して

私はこれがあなたが必要とするものだと思います

あなたの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);


            });
        }
    });
});
于 2013-10-03T19:08:55.630 に答える