Простой JQuery .Animate Code

Question

Простой JQuery .Animate Code

0

Я пытаюсь создать код Simple JQuery.Animate, который позволяет пользователю нажимать на div, page1, и чтобы div сдвигался влево от области страницы, а для второй страницы, стр. 2, чтобы перейти с право.

$(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>

Robin Stevens 03 окт. 2013, в 21:00

Источник

4

У вас есть вопрос?
zzzzBov 03 окт. 2013, в 18:08
0

Чего вы ждете от нас? В чем дело
Sunil Kumar 03 окт. 2013, в 18:15

Теги:

jquery

css

2 ответа

0

Вы перемещаете обе страницы в одну и ту же (абсолютную) позицию: 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);
   });   
});

Blazemonger 03 окт. 2013, в 16:34

Ещё вопросы

SarathSprakash · Accepted Answer · 2013-10-03T17-05-00.000Z

Рабочий ДЕМО

Попробуй это

Я думаю, это то, что вам нужно

ваш 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);


            });
        }
    });
});