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

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

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

Итак, чтобы упростить то, что я ищу, представьте, что у вас есть 2 div 400x600, и вы просматриваете div 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;
});

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


toggle jquery slide
person Community    schedule 22.12.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, проблема в том, что вы всегда анимируете .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/.

person Andrew Whitaker    schedule 22.12.2010
comment
Да вы абсолютно правы! Спасибо, что нашли время, чтобы показать мне этот пример .. высоко ценится. Я новичок в JS, могу я спросить, почему вы можете объявлять переменные, как в PHP $home? Зачем нужен знак доллара? Является ли var $home равным var home? - person ; 22.12.2010
comment
@Rick: использование знака доллара - это просто соглашение, которое я использую, чтобы прояснить, что эта переменная содержит результат jQuery. Вам не нужен знак доллара, я полагаю, это просто привычка после работы над проектами с большим количеством переменных, полезно иметь возможность взглянуть на переменную и сказать, что в ней есть результат jQuery. - person Andrew Whitaker; 22.12.2010
comment
Понятно, спасибо за это объяснение, но когда я это вижу, я сразу думаю о переменных PHP... хе-хе... - person ; 22.12.2010

arrow_upward
0
arrow_downward

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

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;
});
person JakeParis    schedule 22.12.2010
comment
Это не сработало и сделало то же самое, что и раньше. Обратите внимание, что первый щелчок работает... панель 1 соскальзывает, а панель 2 скользит внутрь. Но второй щелчок не работает. Второй щелчок — сначала открывается скрытая панель, а затем просматриваемая в данный момент панель (панель 2) соскальзывает, что приводит к перекрытию. - person ; 22.12.2010