Простой динамический вертикальный слайдер на jquery

@stashappy · Регистрация: 21.08.2011

Студворк — интернет-сервис помощи студентам

Привет.

Ребят, как сделать простой, плавный, вертикальный сдвиг блоков, с добавлением нового блока сверху? Пример изображения снизу.

Задача изначально таковая:
1. Пользователь вводит в форму данные и нажимает кнопку.
2. При нажатии на кнопку, эти данные идут на сервер посредстовом ajax.
3. Сервер возвращает текст, который помещается в новый блок.
4. Скрипт создает этот новый блок и помещает его в тело документа, а старые, уже имеющиеся блоки, плавно сдвигает вниз.

Вот здесь есть пример http://guazzo.ru/blog/web/jque... -2/#result. Урок неплохой, но суть слайдера, немножко другая. Их слайдер, по кругу одну и туже информацию крутит. И как тут втиснуть сверху новый блок, который пользователь толька что добавил, я не знаю...

В принципе, пункты 1,2,3 я могу выполнить. А вот относительно четвертого пункта, хотелось бы получить парочку советов.

@Soldado · 08.12.2012, 23:01

Будут различия при различной вёрстке. Если ширина и высота блоков зависит от разрешения, то мой вариант нужно переделать. Если фиксированные то, возможно, подойдёт.

@stashappy · 09.12.2012, 03:00 **[ТС]**

Soldado. Благодарю вас! Вариант, отличнейший. Это именно то, что я и хотел. Огромное спасибо.
А дизайн фиксированный.

Добавлено через 7 минут
А вы не могли бы скинуть архив с файлами? А то мало ли, может что пропущу...

@Soldado · 10.12.2012, 13:11

В том примере, что я показал, используется CSS3 - могут возникнуть проблемы со старыми версиями браузеров.
Подготовил ещё два варианта - в них кода поменьше. Прикрепляю архивы:

@Soldado · 10.12.2012, 13:12

Архив первого примера

@stashappy · 10.12.2012, 15:05 **[ТС]**

Благодарю. Спасибо.

@stashappy · 23.01.2013, 16:30 **[ТС]**

Soldado. Есть небольшой вопрос. В примерах, блоки и контейнер для блоков, фиксированные. Как сделать их резиновыми? Так как вводимый пользователем текст, может быть большого обьёма и собственно блоки должны как то подстраиваться под количество текста.

Добавлено через 30 минут
Оп, в принципе и сам справился. Вопрос исчерпан.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@stashappy 42 / 42 / 13 Регистрация: 21.08.2011 Сообщений: 625

	Простой динамический вертикальный слайдер на jquery 07.12.2012, 20:40. Показов 6702. Ответов 6 Метки нет (Все метки) Привет. Ребят, как сделать простой, плавный, вертикальный сдвиг блоков, с добавлением нового блока сверху? Пример изображения снизу. Задача изначально таковая: 1. Пользователь вводит в форму данные и нажимает кнопку. 2. При нажатии на кнопку, эти данные идут на сервер посредстовом ajax. 3. Сервер возвращает текст, который помещается в новый блок. 4. Скрипт создает этот новый блок и помещает его в тело документа, а старые, уже имеющиеся блоки, плавно сдвигает вниз. Вот здесь есть пример http://guazzo.ru/blog/web/jque... -2/#result. Урок неплохой, но суть слайдера, немножко другая. Их слайдер, по кругу одну и туже информацию крутит. И как тут втиснуть сверху новый блок, который пользователь толька что добавил, я не знаю... В принципе, пункты 1,2,3 я могу выполнить. А вот относительно четвертого пункта, хотелось бы получить парочку советов. Миниатюры 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	08.12.2012, 23:01
	Будут различия при различной вёрстке. Если ширина и высота блоков зависит от разрешения, то мой вариант нужно переделать. Если фиксированные то, возможно, подойдёт. 1

@stashappy 42 / 42 / 13 Регистрация: 21.08.2011 Сообщений: 625
	09.12.2012, 03:00 [ТС]
	Soldado. Благодарю вас! Вариант, отличнейший. Это именно то, что я и хотел. Огромное спасибо. А дизайн фиксированный. Добавлено через 7 минут А вы не могли бы скинуть архив с файлами? А то мало ли, может что пропущу... 0

@stashappy 42 / 42 / 13 Регистрация: 21.08.2011 Сообщений: 625
	10.12.2012, 15:05 [ТС]
	Благодарю. Спасибо. 0

@stashappy 42 / 42 / 13 Регистрация: 21.08.2011 Сообщений: 625
	23.01.2013, 16:30 [ТС]
	Soldado. Есть небольшой вопрос. В примерах, блоки и контейнер для блоков, фиксированные. Как сделать их резиновыми? Так как вводимый пользователем текст, может быть большого обьёма и собственно блоки должны как то подстраиваться под количество текста. Добавлено через 30 минут Оп, в принципе и сам справился. Вопрос исчерпан. 0

Опции темы