Создать левый / правый эффект перехода - PullRequest
Новая
       31

Создать левый / правый эффект перехода

1 голос
/ 06 июня 2011

Я пытаюсь создать эффект перехода слайдов, как тот, который был опубликован в видео http://www.youtube.com/watch?v=SZTiJmclaRc.

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

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

Я пытался изменить код на http://jsfiddle.net/qSvDz/, как показано ниже, но я не могу получить желаемый результат.

Может кто-нибудь поделится со мной некоторыми соображениями о том, как это сделать. 

function toggleDivs() {
var $home = $("#home");
var $memberHome = $("#member-home");
var $slideOut, $slideIn;

// See which <divs> should be animated in/out.
if ($home.position().left < 0) {
    $slideIn = $home;
    $slideOut = $memberHome;
}
else {
    $slideIn = $memberHome;
    $slideOut = $home;
}

$slideOut.animate({
    left: "-" + $slideOut.width() + "px"
}, function() {
    $slideIn.animate({ left: "0px" });
});
}

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

Спасибо Fire

1 Ответ

8 голосов
/ 06 июня 2011

Как то так?

http://jsfiddle.net/k_rma/VmSX4/

HTML: 

<div id="container">
    <div id="inner">
        <div id="home">
            <button>Click</button>
        </div>
        <div id="member-home">
            <button>Click</button>
        </div>
    </div> 
</div>

JS / JQuery: 

function toggleDivs() {
    var $inner = $("#inner");

    // See which <divs> should be animated in/out.
    if ($inner.position().left == 0) {
        $inner.animate({
            left: "-400px"
        });
    }
    else {
        $inner.animate({
            left: "0px"
        });
    }
}

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

CSS: 

#container {
    position:relative;
    border: 1px solid black;
    width:400px;
    height:600px;
    overflow:hidden
}
#inner {
    position: relative;
    width: 800px; 
}
#home {
    position:absolute;
    width: 400px;
    height: 600px;
    background-color: red;
}

#member-home {
    position:absolute;
    left:400px;
    width: 400px;
    height: 600px;
    background-color: green;
}
...