Из Наведения на Клик (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; }); }); Заранее примного благодарен... :) |
mouseover меняйте на click
mouseout непонятно на что, т.к. вы не определили событие отмены показа блока. |
или в 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; }); }); |
Цитата:
|
Блин, проблема возникла...
В том блоке, который (в сим случае это тег .links) открывается, при клике на объект (#download), клик действует на оба элемента. Как сделать, чтобы при клике на область тега .links, блок не исчезал? У меня так ссылка стоит, я на неё нажимаю, ничего не просходит далее, только блок исчезает и все :( |
потому что вы изменяете его свойство top на 25 пикселей, а потом анимируете это свойство до 25 пикселей. оно будет изменяться ? (нет)
info.css({ top: 25, left: 0, display: 'block' }).animate({ top: 25, opacity: 1 }, time, 'swing', function() { beingShown = false; shown = true; }); |
melky,
Убрал в анимации top: 25, и при исчезании тоже его нет. Вот ваш вопрос не понял не много "будет изменяться?", ничего изменяться не будет просто блок всплывает и исчезает, и всё что в блоке тоже не изменяется. |
Как сделать, чтобы при нажатии на всплывающий блок (это уже после нажатия на #download) не исчезал сам блок?
Нынешняя проблема в том, я считаю, что функция toggle работает и для #download и для .links, как сделать чтобы было только для #download и не срабатывала на блоке .links? |
Никак не могу решить этот вопрос, может кто-нибудь помочь?
|
Часовой пояс GMT +3, время: 02:11. |