Opacity ломает весь jQuery

@Freeze_Breeze · Регистрация: 12.01.2016

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

Есть небольшой блок:

HTML5
1
2
3
4
5
<div class="window_relative" id="window_relative">
   <div class="new_window">
    <img src="img/cross.png" alt="cross">
   </div>
</div>

Тут CSS:

CSS
1
2
3
4
5
6
7
8
9
10
.window_relative {
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 100%; 
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    }

и jQuery:

JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function() {
  $('.block_1').click(function() {
    $('.block_mobile').fadeTo('normal', 0);
  });
 
  $('img[alt="cross"]').click(function() {
    $('#window_relative').animate({height: 'hide'}, 350);
  });
});

Так вот, что происходит, когда в стилях класса .window_relative ставлю opacity: 0;, на сайте перестает работать весь JS код, не реагирует на какое либо поведение, а стоит убрать opacity: 0; все начинает работать. Кто нибудь сталкивался с такой проблемой, подскажите что нибудь?

Qwerty_Wasd · 27.09.2017, 18:31

Freeze_Breeze, приветствую. Если я вас правильно понял - вот этот кусок

Сообщение от Freeze_Breeze

$('img[alt="cross"]').click(function() {
* * $('#window_relative').animate({height: 'hide'}, 350);
* });
});

закрывает

HTML5
1
<div class="window_relative" id="window_relative">

при клике на картинке внутри этого дива. И тут же вы в стилях делаете этот блок полностью прозрачным

CSS
1
opacity: 0;

поэтому вам и не видно ничего. Так-то скрипт работает. Поставьте значение хотя-бы 0.5. Увидите сами.

Добавлено через 1 минуту
Попробуйте в песочнице

@Freeze_Breeze · 27.09.2017, 20:11 **[ТС]**

Qwerty_Wasd, в том то и дело, что мне нужно вот этот кусок блока спрятать, то есть display: none; сделать за месть opacity: 0;, но display: none; не работает, почему то это правило не хочет прятать мне этот HTML код, а он в свою очередь должен появляться при клике одного из элементов. И в дополнение скажу, что весь jQuery код работал нормально и opacity: 0; ему была не проблема, но после длительных тестов другого jQuery кода в один прекрасный момент все пошло не так и opacity: 0; стало проблемой, а display: none; не хочет прятать мой HTML блок. Тут я сам в недоумении. Ранее и сейчас у меня осталась тоже проблема с меню, раньше оно реагировало на клики, но в один прекрасный момент оно стало как бы замороженное, просто открывается, закрывается и ничего более, хотя функционала на это меню написано гораздо больше и до недавних пор оно работало, а сейчас как и с этим HTML блоком перестало работать. Но это совсем другая история.

HTML5
1
2
3
4
5
<div class="window_relative" id="window_relative">
   <div class="new_window">
    <img src="img/cross.png" alt="cross">
   </div>
</div>

Добавлено через 38 минут
Qwerty_Wasd, Я только что заметил, у меня есть background-color: rgba(0, 0, 0, 0.8) с opacity = 0.8, оно как нибудь может мешать или перебивать opacity: 0;?

Qwerty_Wasd · 27.09.2017, 20:30

Freeze_Breeze,

Сообщение от Freeze_Breeze

оно как нибудь может мешать или перебивать

. Ведь

Code
1
rgba(0, 0, 0, 0.8)

задает прозрачность цвета, а

Code
1
opacity = 0.8

прозрачность блока.

Qwerty_Wasd · 27.09.2017, 20:38

Сообщение от Freeze_Breeze

но после длительных тестов другого jQuery кода в один прекрасный момент все пошло не так и opacity: 0; стало проблемой

значит где-то в новом скрипте, присутствует или была допущена при интеграции ошибка в коде. Но мы сейчас просто гадаем. Вам несомненно быстрее помогут, если бы вы к примеру сделали архив с минимальным примером, демонстрирующим то, что вы описали. Чтобы поиграться, посмотреть, что не так-то.

Добавлено через 2 минуты
Кстати такой вопрос, после

Сообщение от Freeze_Breeze

после длительных тестов

- не ставили ли вы себе какие-нибудь расширения в браузер?

@Freeze_Breeze · 27.09.2017, 20:47 **[ТС]**

Qwerty_Wasd, последнее время не ставил, а в целом при установке браузера (еще когда винду устанавливал) поставил себе расширения: Web Developer, Adblock Plus, Tampermonkey, HTML Tidy Browser Extension.

Qwerty_Wasd · 27.09.2017, 20:52

Песочница =>ТЫК<= раскомментируйте

Code
1
display:none;

все работает.

Добавлено через 1 минуту

Сообщение от Freeze_Breeze

поставил себе расширения

тестить нужно на чистом клиенте. Это не правило конечно. Но код расширений писали ведь не вы? А значит вы не можете быть уверены в отсутствии багов с их стороны.

@Freeze_Breeze · 27.09.2017, 20:55 **[ТС]**

Qwerty_Wasd, как раз все написано моими руками

Qwerty_Wasd · 27.09.2017, 20:59

Freeze_Breeze,

Сообщение от Freeze_Breeze

Web Developer, Adblock Plus, Tampermonkey, HTML Tidy Browser Extension

Вы являетесь разработчиком?

@Freeze_Breeze · 27.09.2017, 21:00 **[ТС]**

Qwerty_Wasd, нет, display: none;, не помогает потому, что display: none; должен мне убирать мой background-color: rgba(0, 0, 0, 0.8);, а он почему то остается как ни в чем не бывало, будто он и не видит этого правила, а так да с display: none; все заработало, но не спрятало мне background-color: rgba(0, 0, 0, 0.8);

@Freeze_Breeze · 27.09.2017, 21:02 **[ТС]**

Qwerty_Wasd, ахаххахах да нет, я не разработчик этих расширений, просто Вы спросили, какие расширения установлены, вот я Вам и ответил

Web Developer, Adblock Plus, Tampermonkey, HTML Tidy Browser Extension

@Freeze_Breeze · 27.09.2017, 21:07 **[ТС]**

Забыл добавить приложение к рару

Qwerty_Wasd · 27.09.2017, 21:32

Freeze_Breeze, исследовал ваш код. В правиле

CSS
1
2
3
4
5
@media only screen and (max-width: 480px)
media.css:118
.window_relative {
    display: block;
}

если поставить none. То будет как вам нужно. Это если я вас правильно понял. Теперь что касаемо скриптов. Ничего из того что вы описали у меня нет. Все работает так как написан скрипт. Предлагаю вам очистить клиент от расширений, или выключать по одному, чтобы найти какое бажит.

Qwerty_Wasd · 27.09.2017, 21:41

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

@Freeze_Breeze · 27.09.2017, 21:42 **[ТС]**

Qwerty_Wasd, оО спасиб большое ^_^ все как надо работает

Qwerty_Wasd · 27.09.2017, 21:47

Freeze_Breeze, не за что

@Freeze_Breeze · 27.09.2017, 21:51 **[ТС]**

Qwerty_Wasd, И еще одно, я не прошу писать мне решение или думать как его сделать, просто прошу натолкнуть на мысль. Так сказать дать толчок. Слева то, что есть в стандартном виде, а справа то как оно будет выглядеть при нажатии на один из блоков 1/3/6/9/12 и т.д. И при нажатии на любой блок, должна появляться разная информация. Типо нажал на блок "6" - (показывает) "Виттен - Рудольфинум", нажал на блок "27" - (показывает) "Италия - Испания", то есть на каждом блоке разная информация, не подскажите от чего можно оттолкнуться? Без кода, без чего либо другого, просто дайте направление, если сталкивались с таким. Спасибо

Qwerty_Wasd · 27.09.2017, 22:03

Freeze_Breeze, два блока слева видимый , справа hidden/none. По клику на блок 1 в левом =>

CSS
1
display:block;

блоку 1 в правом ну и т.д. Естественно средствами JS/JQ. Как-то так я это вижу.

Добавлено через 6 минут
Направление дал. Умышленно умалчиваю о двух моментах. Так что подумать вам есть над чем

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	27.09.2017, 20:55 [ТС]
	Qwerty_Wasd, как раз все написано моими руками 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	27.09.2017, 21:00 [ТС]
	Qwerty_Wasd, нет, `display: none;`, не помогает потому, что `display: none;` должен мне убирать мой `background-color: rgba(0, 0, 0, 0.8);`, а он почему то остается как ни в чем не бывало, будто он и не видит этого правила, а так да с `display: none;` все заработало, но не спрятало мне `background-color: rgba(0, 0, 0, 0.8);` Миниатюры 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	27.09.2017, 21:07 [ТС]
	Забыл добавить приложение к рару Миниатюры 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	27.09.2017, 21:42 [ТС]
	Qwerty_Wasd, оО спасиб большое ^_^ все как надо работает 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	27.09.2017, 21:47
	Freeze_Breeze, не за что 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	27.09.2017, 21:51 [ТС]
	Qwerty_Wasd, И еще одно, я не прошу писать мне решение или думать как его сделать, просто прошу натолкнуть на мысль. Так сказать дать толчок. Слева то, что есть в стандартном виде, а справа то как оно будет выглядеть при нажатии на один из блоков 1/3/6/9/12 и т.д. И при нажатии на любой блок, должна появляться разная информация. Типо нажал на блок "6" - (показывает) "Виттен - Рудольфинум", нажал на блок "27" - (показывает) "Италия - Испания", то есть на каждом блоке разная информация, не подскажите от чего можно оттолкнуться? Без кода, без чего либо другого, просто дайте направление, если сталкивались с таким. Спасибо Миниатюры 0