Я пытаюсь создать следующий эффект.Скрыть один div и показать другой div
У меня есть три div S: div1, div2, div3.
Когда я нажимаю на div1, он скользит вверх и удаляется, и в то же время div2 скользит вверх и становится видимым.
Аналогично, при div2 щелчке div2 скользит вверх и получает удаляется и, как div2 скользит вверх, div3 начинает скользить вверх становится видимым.
Я не могу понять, как это сделать. Любая помощь будет оценена.
Этот образец кода действует на всех div. Вы можете изменить селектор на специальный класс или идентификаторы.
$(document).ready(function(){
$("div").click(function(){
$(this).slideUp().next("div").slideDown();
});
})
в вашем случае это достаточно:
$("#div1").click(function(){$(this).slideUp();$("#div2").slideDown();
$("#div2").click(function(){$(this).slideUp();$("#div3").slideDown();
Да, это сработало бы, но щелчок по последнему элементу заставит его исчезнуть. Используя этот подход, вам нужно добавить что-то вроде: if ($ (this) .is ("div: last-of-type")) {$ ("div: first-of-type"). SlideDown(); }; чтобы снова отобразить первый div. Однако это не лучший способ подойти к проблеме. –
Спасибо. Вопрос не сделал попыток. Поэтому я написал общий ответ. После вашего комментария я добавил решение для случая, но это не общее решение не привлекает меня! –
Согласен. Я не знаю, почему пользователь хотел бы итерации через элементы div таким образом. Если у вас было более трех элементов, что делать, если вы хотите прыгать с, скажем, с шестого на второй. Лично я бы пошел на аккордеонный подход. –
Я предложил бы использовать JQuery, чтобы сделать это. В частности, проверьте функцию animate(). Теперь есть много разных способов достижения этого эффекта, и они будут иметь разные реализации в зависимости от результата, который необходим. У меня есть ссылка JSFiddle, где я даю вам один такой пример.
В этом примере у меня есть обертка div, которая имеет к ней overflow: hidden, чтобы действовать как «скрытая граница». Затем я обертываю 3 div в слайдовой обертке, чтобы обеспечить вертикальное скольжение. Затем все, что я сделал, это добавить событие щелчка в #first и #seconddiv, которые перемещают #slideWrapper вверх по соответствующим маржам с анимированным эффектом, предоставляемым функцией jQuery $.animate(). Это должно дать вам хорошее место для начала.
Похоже, вам нужен аккордеон виджет. Проверьте это https://jqueryui.com/accordion/ – user2085955