Плавное появление блоков

@Спрашыватель · Регистрация: 30.05.2016

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

Привет, нужно чтобы блоки понемногу вылезали, а не сразу появлялись мне нужно как на этом сайте http://elektrosila.altop.ru (только уменьшите разрешение до мобильного размера)
Вот скрин

вот эти блоки понемногу появляються.Скиньте плиз скрипт или совет как сделать чтобы почучуть открывалось, я сделал так что сразу в один миг, а мне надо почучуть .В нете искал, но не совсем то что нужно, так что нада помощь ваша.

@BANO · 30.06.2016, 16:58

Не по теме:

Сообщение от Спрашыватель

нада помощь ваша.

конечна нащайника, блин

Добавлено через 30 секунд
вам нужны эффекты slideUp/slideDown из библиотеки jquery

@Спрашыватель · 30.06.2016, 18:11 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
 
    $(document.body).click(function (){
      if ($("#list-please-catalog:first").is(":hidden")) {
        $("#list-please-catalog").slideDown("slow");
      } else {
        $("#list-please-catalog").hide("slow");
      }
    });
 
  });

Я так сделал работает, но скрипт работает при нажатии на любой участок а мне нужно что бы на определённый класс нажимаеш и срабатовало как так сделать?

@Raisin Zn · 30.06.2016, 18:54

Сообщение от Спрашыватель

$(document.body).click(function (){

Вот это: document.body на тот класс, при клике на который нужны эффекты появления.

JavaScript
1
$('.название класса').click(function (){

@Спрашыватель · 30.06.2016, 19:07 **[ТС]**

Так прописал и вообще не работает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
    $(document).ready(function(){
 
    $(#please-work-bro).click(function (){
      if ($("#list-please-catalog:first").is(":hidden")) {
        $("#list-please-catalog").slideDown("slow");
      } else {
        $("#list-please-catalog").hide("slow");
      }
    });
 
  });

@Kerry_Jr · 30.06.2016, 19:13

Спрашыватель, кавычки не поставили.

@Спрашыватель · 30.06.2016, 20:25 **[ТС]**

Спасибо большое!!Ты меня спас просто!

Добавлено через 1 минуту
http://istorg.oo.ua вот тут делаю, уменьши окно до 500px открой блок любой из четверых и закрой.Он закрывается как-то странно становиться прозрачным как привидение и уходит а должен плавно закрытся.Не знаеш что прописать что б закрылось как и открылось?

@sad67man · 01.07.2016, 10:29

Спрашыватель, Вместо .hide("slow"); используйте .slideUp("slow");

@Спрашыватель · 01.07.2016, 11:00 **[ТС]**

Спасибо !!И последний вопрос, а как сделать что б при нажатии на следущий блок, предыдущий автоматически закрывался?Тоесть нажал на блок и другой закрылся а то выходит что они просто один на другой наползают.

@sad67man · 01.07.2016, 12:55

Спрашыватель,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("#please-work-bro").click(function() {
  $(".store-vertical .submenu").css("display", "none")
  $("#list-please-phone").css("display", "none")
  $("#list-please-catalog").stop();
  $("#list-please-catalog").slideToggle("slow");
})
$("#please-work-catalog").click(function() {
  $("#list-please-catalog").css("display", "none")
  $("#list-please-phone").css("display", "none")
  $(".store-vertical .submenu").stop();
  $(".store-vertical .submenu").slideToggle("slow");
})
$("#please-work-phone").click(function() {
  $("#list-please-catalog").css("display", "none")
  $(".store-vertical .submenu").css("display", "none")
  $("#list-please-phone").stop();
  $("#list-please-phone").slideToggle("slow");
})
$(".catalog-section .showsectionchild").click(function() {
  var childs = $(this).closest(".catalog-section").find(".catalog-section-childs");
  childs.stop()
  childs.slideToggle("slow")
})

Добавлено через 1 минуту
Спрашыватель, Странно, что каждый блок имеет разное строение. Приходится, для каждого пункта меню прописывать разные функции.

Добавлено через 4 минуты
https://jsfiddle.net/s8ngcku4/1/

Добавлено через 1 час 26 минут
Спрашыватель, Чуть сократил код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$('.top_panel [id^="please-work-"]').click(function() {
  var currentList = $(this).closest("ul").find('[id^="list-"]')
  var lists = $('.top_panel [id^="list-"]').not(currentList);
  lists.hide();
  currentList.stop();
  currentList.slideToggle("slow")
})
$(".catalog-section .showsectionchild").click(function() {
  var childs = $(this).closest(".catalog-section").find(".catalog-section-childs");
  childs.stop()
  childs.slideToggle("slow")
})

Но вообще используйте классы вместо id. И в скрипте потом замените [id^="..."] на ваш класс

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@Спрашыватель 0 / 0 / 3 Регистрация: 30.05.2016 Сообщений: 171

	Плавное появление блоков 30.06.2016, 16:34. Показов 2030. Ответов 9 Метки нет (Все метки) Привет, нужно чтобы блоки понемногу вылезали, а не сразу появлялись мне нужно как на этом сайте http://elektrosila.altop.ru (только уменьшите разрешение до мобильного размера) Вот скрин вот эти блоки понемногу появляються.Скиньте плиз скрипт или совет как сделать чтобы почучуть открывалось, я сделал так что сразу в один миг, а мне надо почучуть .В нете искал, но не совсем то что нужно, так что нада помощь ваша. 0

@Kerry_Jr 3106 / 2591 / 1219 Регистрация: 14.05.2014 Сообщений: 7,236 Записей в блоге: 1
	30.06.2016, 19:13
	Спрашыватель, кавычки не поставили. 1

@Спрашыватель 0 / 0 / 3 Регистрация: 30.05.2016 Сообщений: 171
	30.06.2016, 20:25 [ТС]
	Спасибо большое!!Ты меня спас просто! Добавлено через 1 минуту http://istorg.oo.ua вот тут делаю, уменьши окно до 500px открой блок любой из четверых и закрой.Он закрывается как-то странно становиться прозрачным как привидение и уходит а должен плавно закрытся.Не знаеш что прописать что б закрылось как и открылось? 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,817
	01.07.2016, 10:29
	Спрашыватель, Вместо `.hide("slow");` используйте `.slideUp("slow");` 1

@Спрашыватель 0 / 0 / 3 Регистрация: 30.05.2016 Сообщений: 171
	01.07.2016, 11:00 [ТС]
	Спасибо !!И последний вопрос, а как сделать что б при нажатии на следущий блок, предыдущий автоматически закрывался?Тоесть нажал на блок и другой закрылся а то выходит что они просто один на другой наползают. 0

Плавное появление блоков

Решение