JQuery: выдвигающиеся панели, разбираем функцию stop()

Добрый день, уважаемый читатель!

Очень часто бывают ситуации, когда необходимо сделать интересную панельку, которая будет выдвигаться при наведении и задвигаться при уводе курсора мыши с панели.

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

Давайте посмотрим живой пример (первый блок), на котором видна эта проблема и как раз разберем, каким образом функция stop() нам может помочь решить данную проблему:

Подвигайте быстро мышкой по панелькам и вы увидите наше проблему.

Разберем подробно, как сделать данную панельку и исправить нашу проблему.

HTML

Разметка очень простая:

<div class="block_content">

    <p>
        Текст...
    </p>

    <a class="panel_tel" href="#">
        <img src="i/icon.png">
        <span>Заказать звонок</span>
    </a>
    <a class="panel_order" href="#">
        <img src="i/icon2.png">
        <span>Купить онлайн</span>
    </a>

</div>

Наши панельку будут состоять из обычного стилизованного тега a, в котором будет маленькая картинка и текст.

CSS

.block_content {
    width: 600px;
    margin: 0 auto;
    margin-top: 50px;
    border: 2px solid #aaa;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.block_content a span {
    vertical-align: 2px;
    font-size: 14px;
}
.block_content a img {
    padding: 11px 5px 0px 7px;
}

/* стилизуем выдвигающиеся панельки */
.panel_tel, .panel_order {
    position: absolute;
    right: -115px; /* панель задвинута */
    width: 140px;

    /* Для тех, кто не поддерживает данное свойство*/
    background: rgb(88, 202, 88); 
    background: rgba(88, 202, 88, 0.8);

    /* закруглим углы у панелек */
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

    /* добавим небольшую тень */
    -moz-box-shadow: -2px 2px 5px #eee;
    -webkit-box-shadow: -2px 2px 5px #eee;
    box-shadow: -2px 2px 5px #eee;

    height: 35px;
    overflow: hidden;
}

/* размещение наших панелек */
.panel_tel {
    top: 50px;
}
.panel_order {
    top: 90px;
}

 JavaScript

Теперь займемся написание нашей логики для анимации панелей.

Для начала, создадим обработчик наведения мыши с помощью функции hover():

var $j = jQuery.noConflict();

$j(function(){

     $j('.panel_tel, .panel_order').hover(
         function () {
            alert('hover');
         },
         function () {
            alert('no hover');
         }
     );

});

С обработчиком, вроде, разобрались. Приступим к анимации:

/* раскрытие и скрытие панели при наведении */
$j('.panel_tel, .panel_order').hover(
    function () {
        // создадим переменные для простоты обращения
        var panelObj = $j(this);
        var panelObjImg = $j(this).find('img');

        // остановим анимацию
        panelObj.stop(true, false);
        panelObjImg.stop(true, false);

        panelObjImg.animate(
            {   // скроем картинку
                'opacity' : '0'
            },
            speed,
            function () {
                panelObj.animate(
                    {   // выдвинем панель
                        'right': '0px'
                    },
                    speed
                );
            }
        );
    },
    function () {
        // создадим переменные для простоты обращения
        var panelObj = $j(this);
        var panelObjImg = $j(this).find('img');

        // остановим анимацию
        panelObj.stop(true, true);
        panelObjImg.stop(true, true);

        panelObj.animate(
            {   // задвинем панель
                'right': '-115px'
            },
            speed,
            function () {
                panelObjImg.animate(
                    {   // покажем картинку
                        'opacity' : '1'
                    },
                    speed
                );
            }
        );
    }
);

Мы создали панельки, которые теперь нормально функционируют даже, если по ним быстро проводить мышкой. А помогла нам в этом функция stop(). Демонстрация (второй блок):

Теория

Так как же она нам помогла? Посмотрим немного теории:

Синтаксис: .stop( [clearQueue ] [, jumpToEnd ] )

clearQueue — удаляет анимацию в очереди. По умолчанию false.

jumpToEnd — заканчивает текущую анимацию немедленно. По умолчанию, false.

Второй вариант синтаксиса:

.stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 

queue — название очереди

Остальные параметры те же.

Когда вызывается .stop() у элемента, текущая анимация (если она есть) немедленно завершается. Если, например, элемент скрывается через .slideUp() и вызывается .stop(), то элемент будет лишь частично скрыт (высота станет такая, какая была на момент вызова функции .stop()). Функция обратной связи у функции .slideUp() вызвана не будет.

Заключение

В данной статья я попытался объяснить, как создать выдвигающиеся панельки и использовать фунцию .stop() для решения возникшей проблемы. Надеюсь, вам понравилось.

Если у вас остались вопросы — задавайте их в комментариях!

Спасибо за внимание!