Ãëàâíàÿ > Ðóêîâîäñòâà > Ýôôåêò íàëîæåíèÿ íà jQuery

Ýôôåêò íàëîæåíèÿ íà jQuery


21 ìàðòà 2011, 12:45. Ðàçìåñòèë: Mysterious Master
Ýôôåêò íàëîæåíèÿ íà jQuery

Ñåãîäíÿ ìû çàéìåìñÿ ðàçðàáîòêîé èíòåðåñíîãî ýôôåêòà íàëîæåíèÿ ñ ïîìîùüþ jQuery, â êîòîðîì íå áóäåò èñïîëüçîâàòüñÿ íèêàêîãî íàëîæåíèÿ. Èäåÿ çàêëþ÷àåòñÿ â òîì, ÷òîáû èçìåíèòü óðîâåíü ïëîòíîñòè öâåòà êîíêðåòíûõ ýëåìåíòîâ, ÷òî èìèòèðóåò ýôôåêò íàëîæåíèÿ. Ýòî ïîçâîëÿåò ñôîêóñèðîâàòü âíèìàíèå íà îïðåäåëåííûõ ýëåìåíòàõ, îòâëåêàÿñü îò âñåõ ïîñòîðîííèõ.

Äëÿ íà÷àëà, íàì íóæíî îïðåäåëèòü, êàêèå ýëåìåíòû áóäóò «çàòóõàòü» (ò.å. íà êàêèõ ýëåìåíòàõ ìû õîòèì âèäåòü òàê íàçûâàåìîå íàëîæåíèå). Äàëåå ìû çàäàåì íóæíûì ýëåìåíòàì êëàññ e-fade, à ýëåìåíòàì, êîòîðûå äîëæíû ïîìåíÿòü öâåò, êëàññ e-color. Äëÿ ëþáîãî èç ýòèõ ýëåìåíòîâ (íåâàæíî, êàêîé èç êëàññîâ, à ìîæåò è îáà ñðàçó, ìû ïðèìåíèëè) íàì íóæíî çàäàòü êëàññ effect.

Ïîñìîòðèòå íà ïðèìåð ïðèìåíåíèÿ äàííûõ êëàññîâ â ñëåäóþùåì êîäå HTML:

<!-- Animates the color -->
<h2 class="effect e-color">Custom effects with jQuery</h2>

<!-- Animates the opacity -->
<h2 class="effect e-fade">Custom effects with jQuery</h2>

<!-- Animates both color and opacity -->
<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 âìåñòî òîãî, ÷òîáû äîáàâëÿòü êëàññû âðó÷íóþ ïîñðåäñòâîì êîäà HTML.

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

Òåïåðü ìû âîçüì¸ì âñå ýëåìåíòû ñ ïðèñâîåííûì êëàññîì effect è îïðåäåëèì ôóíêöèþ OverlayEffect, êîòîðàÿ è áóäåò îòâå÷àòü çà àíèìàöèþ:

var $elems            = $(document).find('.effect'),
    OverlayEffect     = (function(){
            //speed for animations
        var speed                = 1000,
            //the event that triggers the effect
            eventOff            = 'mouseenter',
            //the event that stops the effect
            eventOn                = 'mouseleave',
            //this is the color that the elements will have after eventOff
            colorOff            = '#AAAAAA',
            //saves the original color of each e-color element,
            //and calls the methods to initialize the events
            init                = function() {
                $elems.each(function(){
                    var $el        = $(this);
                    if($el.hasClass('e-color'))
                        $el.data('original-color',$el.css('color'));
                });
                initEventsHandler();
            },
            //initializes the events eventOff / eventOn
            initEventsHandler     = function() {
                $menu
                .delegate('a',eventOff,function(e){
                    //relation is the id of the element,
                    //and the class of related elements
                    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;
                });
            },
            //animates the color and / or opacity
            animateElems        = function(dir,relation) {
                var $e    = $elems;

                switch(dir){
                    case 'on'    :
                //if there are elements on the page with class = relation
                //then these elements will be excluded from the animation
                        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
        };
    })();

/*
call the init method of OverlayEffect
*/
OverlayEffect.init();
});

Âîò è ãîòîâî!

Íàäååìñÿ, ÷òî âàì ïîíðàâèëàñü äàííàÿ ñòàòüÿ è ÷òî îíà âàì ïðèãîäèòñÿ â äàëüíåéøåì!

Ïîñìîòðåòü äåìî | Ñêà÷àòü àðõèâîì
Âíèìàíèå! Ó âàñ íåò ïðàâ äëÿ ïðîñìîòðà ñêðûòîãî òåêñòà.

Âåðíóòüñÿ íàçàä