Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Из Наведения на Клик (mouseover/mouseout->Click) (https://javascript.ru/forum/dom-window/26667-iz-navedeniya-na-klik-mouseover-mouseout-click.html)

nightkon 17.03.2012 11:29

Из Наведения на Клик (mouseover/mouseout->Click)
 
Нужна помощь.
Есть код, при наведении на объект появляется блок с текстом. Нужно сделать, чтобы не при наведении, а при нажатии на объект появлялся блок с текстом.

Вот код:
$(.links').each(function () {
        var distance = 0;
        var time = 400;
        var hideDelay = 200;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('#download', this);
        var info = $('.downloadBox', this).css('opacity', 0);

        $([trigger.get(0), info.get(0)]).mouseover(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;

                info.css({ 
                    top: 25,
                    left: 0,
                    display: 'block'
                }).animate({
                    top: 25,
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }
            return false;
        }).mouseout(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: 25,
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);

            return false;
        });
    });


Заранее примного благодарен... :)

Rootpassword 17.03.2012 11:41

mouseover меняйте на click
mouseout непонятно на что, т.к. вы не определили событие отмены показа блока.

melky 17.03.2012 11:46

или в toggle засунуть :

$(.links').each(function () {
        var distance = 0;
        var time = 400;
        var hideDelay = 200;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('#download', this);
        var info = $('.downloadBox', this).css('opacity', 0);

        $([trigger.get(0), info.get(0)]).toggle(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;

                info.css({ 
                    top: 25,
                    left: 0,
                    display: 'block'
                }).animate({
                    top: 25,
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }
            return false;
        }, function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: 25,
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);

            return false;
        });
    });

nightkon 17.03.2012 11:59

Цитата:

Сообщение от melky (Сообщение 163620)
или в toggle засунуть :

Спасибо большое... Примного благодарен...

nightkon 17.03.2012 12:30

Блин, проблема возникла...
В том блоке, который (в сим случае это тег .links) открывается, при клике на объект (#download), клик действует на оба элемента.
Как сделать, чтобы при клике на область тега .links, блок не исчезал? У меня так ссылка стоит, я на неё нажимаю, ничего не просходит далее, только блок исчезает и все :(

melky 17.03.2012 12:47

потому что вы изменяете его свойство top на 25 пикселей, а потом анимируете это свойство до 25 пикселей. оно будет изменяться ? (нет)
info.css({ 
                    top: 25,
                    left: 0,
                    display: 'block'
                }).animate({
                    top: 25,
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });

nightkon 17.03.2012 13:12

melky,
Убрал в анимации top: 25, и при исчезании тоже его нет.
Вот ваш вопрос не понял не много "будет изменяться?", ничего изменяться не будет просто блок всплывает и исчезает, и всё что в блоке тоже не изменяется.

nightkon 17.03.2012 16:04

Как сделать, чтобы при нажатии на всплывающий блок (это уже после нажатия на #download) не исчезал сам блок?
Нынешняя проблема в том, я считаю, что функция toggle работает и для #download и для .links, как сделать чтобы было только для #download и не срабатывала на блоке .links?

nightkon 18.03.2012 07:46

Никак не могу решить этот вопрос, может кто-нибудь помочь?


Часовой пояс GMT +3, время: 02:11.