jQuery слайд-эффект с переключателем? - PullRequest
Новая
       8

jQuery слайд-эффект с переключателем?

1 голос
/ 22 декабря 2010

Привет, ребята ... Я пытаюсь создать эффект, при котором, если я нажимаю кнопку 1, панель перемещается влево, а другая открывается.И если я нажму еще раз, текущий ускользнет, ​​а предыдущий сдвинется назад, как кнопка переключения.

У меня есть следующий код, и он работает "вроде" ... Мой код при нажатии выглядитХорошо, в первый раз щелкнул, но во второй раз панель зашла кругом, прежде чем просматривалась первая.

Итак, чтобы упростить то, что я ищу, представьте, что у вас есть 2 деления 400x600, и вы просматриваете деление 1по умолчанию и при нажатии кнопки div 1 сдвигается влево вне поля зрения, и div 2 скользит также слева после того, как div 1 скрыт, а при повторном нажатии div 2 сдвигается влево и div 1 снова перемещается втакже слева ... он переключается .. 

jQuery(".button").click(function() {
    var $lefty = jQuery(".home");
       $lefty.animate({
       left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0}, 

 function() {
    jQuery(".member_home").show();
    var $lefty = jQuery(".member_home");
       $lefty.animate({
       left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
});

});
    return false;
});

Если кто-нибудь может мне здесь помочь, было бы здорово!спасибо!

Ответы [ 2 ]

1 голос
/ 22 декабря 2010

Я думаю, проблема в том, что вы всегда анимируете .home, а затем .member_home, хотя на самом деле это не всегда так. Когда .home находится вне экрана, вы хотите сначала анимировать .member-home с экрана, а затем анимировать .home. Эффект, который вы видите, заключается в том, что вы всегда анимируете div в одном и том же заказ, независимо от того, что за кадром.

Вот функция, которая добавляет логику, которая исправит это: 

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();
});

Проверьте рабочий пример здесь: http://jsfiddle.net/andrewwhitaker/qSvDz/.

0 голосов
/ 22 декабря 2010

Сделать вставку второй панели функцией обратного вызова. Тогда он не будет скользить, пока первая панель не будет скрыта. редактировать 

jQuery(".button").click(function() {
    var $lefty = jQuery(".home");
       $lefty.animate({
       left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0}, 

 function() {
    jQuery(".member_home").show(400,function() {
        var $lefty = jQuery(".member_home");
           $lefty.animate({
           left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
    });
});

});
    return false;
});
...