Замена фона блока

@Master_Yi · Регистрация: 22.12.2013

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

Простейший в мире скрипт:

HTML5
1
2
3
4
5
6
<span class="bhb" style="background-color: #000;">GHGHGHGHGHGHG</span>
<script>
$('.bhb').hover(function(){
$('.bhb').stop(true).animate({backgroundColor: "#fff"}, 1000);
});
</script>

Просто плавно заменяем фон у блока, но почему-то не работает у меня. Библиотеку подключил, ошибки не пишет... Уважаемые программисты, что не так?
+
Так же намного круче если бы вы дали пример скрипта который плавно закрашивает блок снизу. Я никак не могу найти примеры или придумать как это делать.

@Lazy_Den · 20.01.2015, 21:55

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

но почему-то не работает у меня

Если вы подключили библиотеку jQuery и подключили jQuery UI, разместили свой JS-код ниже элемента, с которым он должен работать или обернули в конструкцию DOM-Ready, то всё будет отлично работать.

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

пример скрипта который плавно закрашивает блок снизу

Какой блок? Я никакого "блока ниже" не наблюдаю.

@Master_Yi · 20.01.2015, 22:01 **[ТС]**

Lazy_Den, Тэк-с, сейчас проверюсь. А на счет второго:
Не в том понимании снизу =)
Допустим есть блок:
<div class="main">Главная</div>
Мне нужно сделать что бы вон у этого блока закрасился, при чем не просто сменил цвет, а плавно, начиная снизу и до верха.

@Lazy_Den · 20.01.2015, 22:10

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

плавно, начиная снизу и до верха

У меня с фантазией не так чтоб совсем туго, но представить вашу задачу не могу. Может вы это имели в виду?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.main {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #999;
    overflow: hidden;
}
.main::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,102,0,0);
    top: 100%;
    transition: all 1s linear;
}
.main:hover::after {
    top: 0;
    background: rgba(0,102,0,1);
}

@Master_Yi · 20.01.2015, 22:13 **[ТС]**

Lazy_Den, Да, только мне нужно сделать подобное через JS, ибо CSS3 не у всех поддерживается =(

@Lazy_Den · 20.01.2015, 22:15

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

Да, только мне нужно сделать подобное через JS

Так что мешает? Алгоритм ясен из css, перекиньте его на js.

@Master_Yi · 20.01.2015, 22:56 **[ТС]**

Lazy_Den, Мешает то что я не знаю как присвоить :after через скрипт...

@Lazy_Den · 20.01.2015, 23:05

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

Мешает то что я не знаю как присвоить :after через скрипт

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

@Master_Yi · 20.01.2015, 23:53 **[ТС]**

Lazy_Den, Вы предлагаете засунуть див под див? А не "по-крабски" ли это? (я об этом думал с самого начала, но решил что так нормальные люди не делают...)

@Lazy_Den · 20.01.2015, 23:59

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

А не "по-крабски" ли это?

Вам нужна реализация задуманного с учетом старых убогих браузеров или так, чтоб "не по-крабски"? Или вы знаете способы, где без "костылей" можно достичь какого-то подобия CSS3 в том же осле 8?

@Master_Yi · 21.01.2015, 00:28 **[ТС]**

Lazy_Den, Я слишком краб что бы что-то знать не крабское =)
Мне желательно что бы работало в большинстве браузеров. Который из способ самый эффективный при этом?

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	20.01.2015, 22:01 [ТС]
	Lazy_Den, Тэк-с, сейчас проверюсь. А на счет второго: Не в том понимании снизу =) Допустим есть блок: <div class="main">Главная</div> Мне нужно сделать что бы вон у этого блока закрасился, при чем не просто сменил цвет, а плавно, начиная снизу и до верха. 0

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	20.01.2015, 22:13 [ТС]
	Lazy_Den, Да, только мне нужно сделать подобное через JS, ибо CSS3 не у всех поддерживается =( 0

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	20.01.2015, 22:56 [ТС]
	Lazy_Den, Мешает то что я не знаю как присвоить :after через скрипт... 0

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	20.01.2015, 23:53 [ТС]
	Lazy_Den, Вы предлагаете засунуть див под див? А не "по-крабски" ли это? (я об этом думал с самого начала, но решил что так нормальные люди не делают...) 0

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	21.01.2015, 00:28 [ТС]
	Lazy_Den, Я слишком краб что бы что-то знать не крабское =) Мне желательно что бы работало в большинстве браузеров. Который из способ самый эффективный при этом? 0