Как перемещаться между DIVами? ⇐ Jquery
-
Anonymous
Как перемещаться между DIVами?
Я хочу создать три карточки, которые будут отображаться друг за другом при нажатии (поочередно), и придумал следующий код:
$('.box1').click(function(){ $('.box1').toggleClass('removeanimate'); $(this).toggleClass('go'); $('.box2').removeClass('go'); }); $('.box2').click(function(){ $(this).toggleClass('go'); $('.box3').removeClass('go') }); $('.box3').click(function(){ $(this).toggleClass('go'); $('.box1').toggleClass('go'); $('.box2').toggleClass('go'); }); .wrapper{ положение: статическое; } .коробка{ ширина: 200 пикселей; высота: 100 пикселей; позиция: абсолютная; поле: 5 пикселей; курсор: указатель; переполнение: скрыто; выравнивание текста: по центру; высота строки: 100 пикселей; } .box1 { z-индекс: 2; } .box2{ z-индекс: 1; } .box3{ z-индекс: 0; } .идти{ высота: 0; ширина: 0; } .box:nth-child(1) { фон: зеленый; } .box:nth-child(2) { фон: красный; } .box:nth-child(3) { фон: оранжевый; } .removeanimate: { преобразование: масштаб (0,7); преобразование-начало: слева; цвет фона: розовый; Я блок 1 Я блок 2 У меня блок 3
Мой вопрос:
1-Я хочу узнать, как анимировать между ними, но .removeanimate явно не работает. Как я могу это исправить?
2-Я чувствую, что часть сценария неверна, потому что, если я захочу добавить поле 100, я не смогу добавить функцию onclick 100 (я могу, но это странно) и один $(this).toggleClass( 'go'); Досен не работает, он отключает вращательное поведение (начинать заново после последней карты). Как я могу это исправить?
Я хочу создать три карточки, которые будут отображаться друг за другом при нажатии (поочередно), и придумал следующий код:
$('.box1').click(function(){ $('.box1').toggleClass('removeanimate'); $(this).toggleClass('go'); $('.box2').removeClass('go'); }); $('.box2').click(function(){ $(this).toggleClass('go'); $('.box3').removeClass('go') }); $('.box3').click(function(){ $(this).toggleClass('go'); $('.box1').toggleClass('go'); $('.box2').toggleClass('go'); }); .wrapper{ положение: статическое; } .коробка{ ширина: 200 пикселей; высота: 100 пикселей; позиция: абсолютная; поле: 5 пикселей; курсор: указатель; переполнение: скрыто; выравнивание текста: по центру; высота строки: 100 пикселей; } .box1 { z-индекс: 2; } .box2{ z-индекс: 1; } .box3{ z-индекс: 0; } .идти{ высота: 0; ширина: 0; } .box:nth-child(1) { фон: зеленый; } .box:nth-child(2) { фон: красный; } .box:nth-child(3) { фон: оранжевый; } .removeanimate: { преобразование: масштаб (0,7); преобразование-начало: слева; цвет фона: розовый; Я блок 1 Я блок 2 У меня блок 3
Мой вопрос:
1-Я хочу узнать, как анимировать между ними, но .removeanimate явно не работает. Как я могу это исправить?
2-Я чувствую, что часть сценария неверна, потому что, если я захочу добавить поле 100, я не смогу добавить функцию onclick 100 (я могу, но это странно) и один $(this).toggleClass( 'go'); Досен не работает, он отключает вращательное поведение (начинать заново после последней карты). Как я могу это исправить?
Мобильная версия