Постепенное проявление блока с заменой CSS свойства

@demkakysh · Регистрация: 11.08.2015

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

Уважаемые, подскажите пожалуйста.

Сделал с помощью JQuery такую тему, что при наведении на блок у него моментально меняется свойство background-color из css стиля offMail на то, что указано в onMail.

Собственно вопрос, как сделать так, чтобы блок перекрашивался не моментально при наведении а как бы постепенно, с проявлением?

JavaScript
1
2
3
4
5
6
7
8
$("#mail-logo").on("mouseover mouseleave", mail);
});
 
function mail(evt)  
{
    $("#mail-logo").toggleClass("onMail");
 
}

хотел сделать через функцию внутри команды .toggleClass но браузер дико виснет и блок вообще пропадает

JavaScript
1
2
3
4
5
6
7
8
9
10
$("#mail-logo").on("mouseover mouseleave", mail);
});
 
function mail(evt)  
{
    $("#mail-logo").toggleClass(function(){
$(".onMail").show(5000);        
    });
 
}

P.S. Прошу извинить, если туплю и называю вещи не своими именами, но в JQuery нуб.

@Karssen · 11.08.2015, 03:17

Сделайте через animate. Правда придется разбить на 2 функции. На маусовер пишите

JavaScript
1
$("#mail-logo").animate({'':'','':''}, 5000);

В кавычках через двоеточие указываете свойство-значение из класса онмеил через запятую. А на мауслив скидываете значение в пустую строку и оно вернется к тем что прописаны по умолчанию

@Shakalaka · 11.08.2015, 09:03

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

Собственно вопрос, как сделать так, чтобы блок перекрашивался не моментально при наведении а как бы постепенно, с проявлением?

Собственно вопрос, а зачем делать на jquery то, что можно легко сделать на css?

CSS
1
2
3
4
5
6
7
.offMail{
    background-color:#ccc;
    transition:.4s background;
}
.offMail:hover{
    background-color:#1267ac;
}

Или вы под старые IE пишите?

@demkakysh · 11.08.2015, 16:15 **[ТС]**

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

Сделайте через animate. Правда придется разбить на 2 функции. На маусовер пишите

JavaScript
1
$("#mail-logo").animate({'':'','':''}, 5000);

В кавычках через двоеточие указываете свойство-значение из класса онмеил через запятую. А на мауслив скидываете значение в пустую строку и оно вернется к тем что прописаны по умолчанию

Сделал, как вы сказали (вроде), но к сожалению четно, теперь даже иконки не подсвечиваются.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
 
    $("#mail-logo").mouseover(function()
    {
    $("#mail-logo").animate({'background-color':'#666671'}, 5000);
});
 
$("#mail-logo").mouseleave(function()
    {
    $("#mail-logo").animate({'':''}, 5000);
});
 
 
});

@Karssen · 11.08.2015, 19:35

закиньте хтмл код посмотреть и css

@kv4sha · 12.08.2015, 12:49

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
 
    $("#mail-logo").mouseover(function()
    {
    $("#mail-logo").animate({backgroundColor:"#666671"}, 5000);
});
 
$("#mail-logo").mouseleave(function()
    {
    $("#mail-logo").animate({backgroundColor:""}, 5000);
});
 
 
});

Нужно подключить jQuery UI

Добавлено через 12 часов 45 минут
Я тоже недавно похожую задачу решал

JavaScript
1
2
3
4
5
$(".test").hover(function () {
    $(this).stop().animate({ backgroundColor: "#ad92ff", color: "#ad92ff" }, 200) },
    function () {
        $(this).stop().animate({ backgroundColor: "none", color: "#03043e" }, 200)
    });

Обязательно jQuery UI с обычным jQuery цвета меняться не будут

@demkakysh · 12.08.2015, 16:20 **[ТС]**

Спасибо большое, действительно, при подключении JQuery user interface все заработало.

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	11.08.2015, 19:35
	закиньте хтмл код посмотреть и css 0

@demkakysh 0 / 0 / 0 Регистрация: 11.08.2015 Сообщений: 4
	12.08.2015, 16:20 [ТС]
	Спасибо большое, действительно, при подключении JQuery user interface все заработало. 0

Опции темы

Постепенное проявление блока с заменой CSS свойства

Решение