Из Наведения на Клик (mouseover/mouseout->Click)

[nightkon]

Нужна помощь.
Есть код, при наведении на объект появляется блок с текстом. Нужно сделать, чтобы не при наведении, а при нажатии на объект появлялся блок с текстом.

Вот код:

$(.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]

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

[melky]

или в 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]

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

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

[nightkon]

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

[melky]

потому что вы изменяете его свойство top на 25 пикселей, а потом анимируете это свойство до 25 пикселей. оно будет изменяться ? (нет)

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

[nightkon]

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

[nightkon]

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

[nightkon]

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