Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > jQuery выделение элемента(анимированная подсветка)


Автор: Molodec 21.3.2011, 17:34
Здравствуйте, подскажите, пожалуйста, может пример какой как сделать так, чтобы при наведении на span его background-color изменялся от ffff99 до ffff33 и обратно и так пока мышка с него не будет убрана. Знаю, что тут связано с Animate, но как организовать цикл, и чтобы потом все вернулось на свое место не знаю. Заранее благодарен. 

Автор: bars80080 21.3.2011, 20:19
это можно сделать и с помощью css

Код

span { background-color: #ffff99; }
span:hover { background-color: #ffff33; }

Автор: Molodec 22.3.2011, 09:16
bars80080, прошу прощения. Не правильно поставил вопрос. Хотелось бы чтобы цвет плавно переливался...

Автор: bars80080 22.3.2011, 11:02
любая плавность означает таймер. вешаем на каждый span события наведения и уведения мыши. оба будут запускать таймеры

Код

$(document).ready(function() {
    $('span').each(function() {
        $(this).bind('mouseover', function() { startef(this, 1); }).bind('mouseout', function() { startef(this, 0); });
    });
});
function startef(th, mod) {
    // установка начального значения и сохранение его. 

    // также сохранение направления перебора

    // запуск таймера
    var setTimeout('execfunc()', 40);
}


ну и тут надо написать кусок кода. у нас должен быть переход от одного цвета к другому, значит, надо где-то сохранять промежуточные значения. это может быть либо массив, но его надо сформировать так, чтобы там находились все счётчики spanов, либо хранить значение можно в атрибуте самого элемента. что проще, но более тормознутый вариант.

вообще, вся эта задача при наличии достаточно большого числа элементов будет весьма тормозить страницу

Автор: Molodec 22.3.2011, 13:56
Цитата(bars80080 @  22.3.2011,  11:02 Найти цитируемый пост)
вообще, вся эта задача при наличии достаточно большого числа элементов будет весьма тормозить страницу

Понятно. Спасибо за помощь.  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)