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

@Спрашыватель · Регистрация: 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^="..."] на ваш класс

Новые блоги и статьи Все статьи Все блоги /
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .

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

	Плавное появление блоков 30.06.2016, 16:34. Показов 2027. Ответов 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,814
	01.07.2016, 10:29
	Спрашыватель, Вместо `.hide("slow");` используйте `.slideUp("slow");` 1

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

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

Решение