Анимация изменения класса

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

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

Всем добрый день. Столкнулся с такой проблемой. Вот так все работает:

HTML5
1
<div></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
.blue {
        background-color: #487055;
    width: 300px;
    height: 300px;
}
 
div {
    background-color: #f58dd6;
    width: 100px;
    height: 100px;
}

JavaScript
1
2
3
4
5
$(document).ready(function() {
    $('div').click(function() {
        $(this).addClass('blue', 1000, 'easeOutBounce');
    });
});

НО! Стоит добавить элементу div любой класс или id и поменять селекторы в CSS И JS кодах, то все перестает работать. Вопрос. Что за идиотская механика?

@Уф · 11.11.2017, 16:05

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

кури http://htmlbook.ru/samcss/kaskadirovanie

@Freeze_Breeze · 11.11.2017, 16:18 **[ТС]**

Уф, спасибо капитан очевидность, но ты не внимательно прочитал саму проблему. Выше код работает. Ниже приведенный код НЕ работает!

HTML5
1
<div class="foo"></div>

CSS
1
2
3
4
5
6
7
8
9
10
.blue {
    background-color: #487055;
    width: 300px;
    height: 300px;
}
.foo {
    background-color: #f58dd6;
    width: 100px;
    height: 100px;
}

JavaScript
1
2
3
4
5
$(document).ready(function() {
    $('.foo').click(function() {
        $(this).addClass('blue', 1000, 'easeOutBounce');
    });
});

Ты видишь разницу в коде? Причем здесь приоритет стилей? Где костыль? Но, если поменять местами классы .foo и .blue в CSS стилях, то все заработает в обратном направлении.

@Уф · 11.11.2017, 20:59

https://jsfiddle.net/3f5b3jdq/
конечно, ведь это одинакового приоритета стили, как по твоему браузер поймет какой важнее, поставь теги !important

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

CSS
1
2
3
4
5
6
7
8
9
10
div.blue {
    background-color: #487055;
    width: 300px;
    height: 300px;
}
.foo {
    background-color: #f58dd6;
    width: 100px;
    height: 100px;
}

или припиши к первому стилю div, это добавит ему очков приоритета

надо было читать статью из моего очевидного совета

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

Новые блоги и статьи Все статьи Все блоги /
Функция установки текстового статуса в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем
10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	11.11.2017, 16:05
	скорее всего ты напоролся на приоритет стилей, стили указанные по йади имеют более высокий приоритет чем просто на класс, и соотвественно стиль класса приоритетней чем стиль элементы кури http://htmlbook.ru/samcss/kaskadirovanie 0