Эффект выделения информации средствами jQuery

Сегодня мы создадим специальный jQuery эффект для текста. Идея заключается в том, чтобы изменять прозрачность или цвет элементов, которые не относятся к тому или иному сегменту информации, который пользователи выбрали в соответствующем меню. Таким образом, мы позволим нашим посетителям сайта концентрировать внимание только на том, что их интересует.

В первую очередь мы должны определиться с тем, к каким элементам будем применять эффект, так же определиться хотим мы изменять цвет, прозрачность или все вместе. Тем элементам, которые будем изменять прозрачность, зададим класс “e-fade”, а тем которым будем менять цвет “e-color”. Помимо этого, вне зависимости от выбранного эффекта, каждому из этих элементов, припишем класс “effect”.

Пример использования классов в следующей html структуре:

<!—- Анимировать изменение цвета -->
<h2 class="effect e-color">Custom effects with jQuery</h2>

<!—- Анимировать изменение прозрачности -->
<h2 class="effect e-fade">Custom effects with jQuery</h2>

<!—- Анимировать и изменение цвета и прозрачности -->
<h2 class="effect e-color e-fade">Custom effects with jQuery</h2>

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

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

Имя класса будет иметь такое же название как и ID для элементов списка. Таким образом мы создадим связь между этими двумя элементами:

<ul id="menu" class="menu">
    <li><a href="#"><img src="/images/1.png" alt="1"/></a></li>
    <li><a href="#"><img src="/images/2.png" alt="2"/></a></li>
    <li><a href="#"><img src="/images/3.png" alt="3"/></a></li>
    <li><a href="#"><img src="/images/4.png" alt="4"/></a></li>
    <li><a href="#" id="effect-n"><img src="/images/5.png" alt="5"/></a></li>
</ul>

...

<h3 class="effect-n">Vapour around me</h3>

Как вы видите, последнему элементы мы приписали ID, а h3 содержит класс с точно таким же именем. Так что как только мышка покинет данный элемент, анимация сработает для всех остальных элементов.

Теперь возьмёмся за JavaScript.

Закэшируем некоторые элементы:

var $menu           = $('#menu'),
$container      = $('#container'),
$content        = $container.find('.content');

Вместо того чтобы приписывать класс каждому элементу, мы сделаем это средствами jQuery:

$content
.find('p')
.addClass('effect e-fade')
.end()
.find('h1, h2, h3')
.addClass('effect e-fade e-color');

Теперь мы выберем все элементы, которые относятся к классу “effect” и определим специальную функцию, которая будет отвечать за анимацию:

var $elems          = $(document).find('.effect'),
    OverlayEffect   = (function(){
            //скорость анимации
        var speed               = 1000,
            //по какому событию активировать эффект
            eventOff            = 'mouseenter',
            //по какому событию дезактивировать эффект
            eventOn             = 'mouseleave',
            //цвет, в который окрасить скрывающиеся заголовки
            colorOff            = '#AAAAAA',
            //сохраняем оригинальный цвет заголовков,
            //и вызываем метод, который инициализирует события
            init                = function() {
                $elems.each(function(){
                    var $el     = $(this);
                    if($el.hasClass('e-color'))
                        $el.data('original-color',$el.css('color'));
                });
                initEventsHandler();
            },
            //инициализируем события eventOff / eventOn
            initEventsHandler   = function() {
                $menu
                .delegate('a',eventOff,function(e){
                    var relation    = $(this).attr('id');
                    animateElems('off',relation);
                    return false;
                })
                .delegate('a',eventOn,function(e){
                    var relation    = $(this).attr('id');
                    animateElems('on',relation);
                    return false;
                });
            },
            //анимируем изменение цвета и / или прозрачности
            animateElems        = function(dir,relation) {
                var $e  = $elems;

                switch(dir){
                    case 'on'   :
                //если присутствуют элементы с классом= relation
                //то они не будут анимированы
                        if(relation)
                            $e  = $elems.not('.'+relation);

                        $e.each(function(){
                            var $el     = $(this),
                                color   = $el.data('original-color'),
                                param   = {};

                            if($el.hasClass('e-color'))
                                param.color     = color;
                            if($el.hasClass('e-fade'))
                                param.opacity   = 1;

                            $el.stop().animate(param,speed);
                        });

                        break;
                    case 'off'  :
                        if(relation)
                            $e  = $elems.not('.'+relation);

                        $e.each(function(){
                            var $el     = $(this),
                                param   = {};

                            if($el.hasClass('e-color'))
                                param.color     = colorOff;
                            if($el.hasClass('e-fade'))
                                param.opacity   = 0.1;

                            $el.stop().animate(param,speed);
                        });

                        break;
                }
            };

        return {
            init                : init
        };
    })();

OverlayEffect.init();
});

Вот и всё!

Надеюсь урок вам понравился!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/AiH8we1DDgM/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Эффект выделения информации средствами jQuery | | 2012-06-25 16:21:49 | | Статьи Web-мастеру | | Сегодня мы создадим специальный jQuery эффект для текста. Идея заключается в том, чтобы изменять прозрачность или цвет элементов, которые не относятся к тому или иному сегменту информации, который | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: