jQuery iPhone Эффект SlideLeft и SlideRight

Question

Я хотел бы создать эффект скольжения iPhone, который будет работать следующим образом:

Когда кнопка нажата, текущий div # 1 будет скользить влево и скрываться, в то время как другой div # 2 будет скользить справа и перемещаться в положение предыдущего выдвинутого div.

И когда кнопка снова сработает, div # 2 будет смещаться вправо, а ранее скрытый div # 1 будет смещаться слева.

Я пытаюсь использовать код, предложенный одним из пользователей в stackoverflow, но мне просто не удается заставить его работать.

http://jsfiddle.net/qSvDz/

Может кто-нибудь, проведите меня через это.

Спасибо Огонь

Answer 1

используйте это: http://jquery.malsup.com/cycle/ с эффектом "scrollLeft" или "scrollRight"

Answer 2

http://jsfiddle.net/qSvDz/231/

CSS просто выталкивает # member-home за экран, пока #home находится на экране. Довольно простой.

Кнопка вызывает toggleDivs () при каждом нажатии. toggleDivs () захватывает два отдельных элемента div и присваивает их локальным переменным. Сначала проверяется, находится ли div #home вне экрана (position (). Left <0). Если это так, он вернет его обратно на экран, установив CSS: <code>left: 0px и вытолкнув div #memberHome за экран с помощью CSS left: "-" + $home.width() + "px". Если нет, то он вытянет div #memberHome на экран left: 0px и вытолкнет div #home за пределы экрана left: "-" + $home.width() + "px"

function toggleDivs() {
    var $home = $("#home");
    var $memberHome = $("#member-home");
    if ($home.position().left < 0) {
        $home.animate({
            left: "0px"
        });
        $memberHome.animate({
            left: "-1000px"
        });


    }
    else {
        $home.animate({
            left: "-" + $home.width() + "px"
        });
        $memberHome.animate({
            left: "0px"
        });
    }
}

$("button").bind("click", function() {
    toggleDivs();
});