JQuery импульсный вопрос

Я использую слегка модифицированную версию замечательного подключаемый модуль Pulse от Джеймса Падолси. Он обеспечивает пульсирующую функциональность без необходимости привязки к jQuery-UI, что для меня отлично, поскольку у меня уже есть ссылка на jQuery, и я не хочу возиться с другим набором инструментов, если мне это не нужно...

Мой вопрос в том, возможно ли иметь только импульс границы фокуса, а не весь элемент. В текущей реализации пульсирует весь элемент, но я хочу, чтобы это делала только граница фокуса и, если возможно, только тогда, когда граница видна (т. е. пользователь перешел на ссылку).

Заранее спасибо,

Аарон Шовен

Изменить: вот тестовая страница, чтобы продемонстрировать мою дилемму

Изменить Изменить: Хорошо, думаю, мне следовало задать этот вопрос по-другому... Моя текущая реализация ссылается на элементы с классами "ссылка" и "piclink". Можно ли конкретно указать границу фокуса?

Правка Правка Правка: я нашел несколько JS функций, которые позволяют манипулировать правилами CSS в таблицах стилей. .. Я попытаюсь использовать их в сочетании с вышеуказанным модифицированным плагином, чтобы добиться того, что мне нужно. Я обновлю свои выводы.


person Aaron Chauvin    schedule 20.06.2011    source источник
comment
Вы действительно многое упускаете, если не используете все возможности пользовательского интерфейса Jquery. Одни только кнопки и темароллер являются причинами для загрузки библиотеки.   -  person bpeterson76    schedule 21.06.2011
comment
Я понимаю, откуда вы, но на моем сайте я не использую ни одну из этих функций, так что....   -  person Aaron Chauvin    schedule 21.06.2011
comment
твой вопрос везде. если вы разместите пример кода на jsfiddle.net, это может помочь нам помочь вам   -  person Jeff    schedule 21.06.2011
comment
Взгляните на тестовую страницу, на которую есть ссылка в первом редактировании... на этой странице все элементы со ссылкой на класс или пикссылкой пульсируют. Я хочу, чтобы пульсировала только граница фокуса и, если возможно, только тогда, когда граница фокуса видна (пользователь перешел на ссылку).   -  person Aaron Chauvin    schedule 21.06.2011


Ответы (1)


Хотя я не смотрел на плагин, надеюсь, этот небольшой фрагмент немного поможет вашему собственному решению:

Учитывая этот css:

.blinky {
    background-color:blue;
    color:white;
    outline-width:5px;
    outline-style:solid;
    outline-color:green;
}

Вы можете написать что-то вроде:

// in on ready
$('.blinky').focus(function(){
   $(this).animate({
    'outline-width': '0px'
   }, 500, function() {
      animateBorder(this,5);
   });
});
// elsewhere
function animateBorder(context,px)
{
    $(context).animate({
        'outline-width': px+'px'
       }, 500, function() {
           // make sure its still focused before calling again
           if(this===document.activeElement){
               animateBorder(context,(px>0)?0:5);
           }
       }
    );
}

Вот простой пример jsfiddle. Нажмите кнопку, чтобы установить фокус, который запускает анимацию, затем щелкните где-нибудь еще на странице, чтобы он потерял фокус и остановил анимацию.

По сути, это просто анимация размера границы контура от заданного значения до 0 и обратно.

Затем он рекурсивно вызывает ту же функцию анимации, чтобы она оставалась в непрерывном цикле. Но перед каждым рекурсивным вызовом он проверяет, что элемент все еще активен.

Надеюсь, отсюда вы сможете настроить это так, как вам нужно, поскольку это не отвечает на ваш вопрос напрямую (извините!).

person WSkid    schedule 21.06.2011
comment
Спасибо, это как раз то, о чем я говорю! Я собираюсь настроить его, чтобы изменить непрозрачность, а не ширину границы (если это возможно), и сообщить о своих выводах. Кстати, я видел этот тип кода раньше, но никогда точно не знал, что происходит: (px›0)?0:5) Очевидно, что это условный stmt, но что делает ?0:5? - person Aaron Chauvin; 22.06.2011
comment
Я не думаю, что у контура есть свойство непрозрачности - если вы действительно хотите пойти по этому пути, вам нужно будет сделать еще один ‹div›, который находится за вашим элементом, и показывать его (и мигать) только в фокусе, и изменить его на скрыты при расфокусировке. ()?: является третичным оператором. В основном он оценивает материал в круглых скобках, если это правда, он делает левую часть:, ложь правую сторону. Так что в этом случае, если px больше 0 - отправьте 0, иначе отправьте 5. - person WSkid; 22.06.2011
comment
Круто, большое спасибо за подсказки! Я хочу использовать свойство структуры, потому что оно не мешает потоку страницы, в то время как свойство границы мешает. Есть ли способ сделать так, чтобы граница не сбрасывала поток? - person Aaron Chauvin; 22.06.2011
comment
Ненадежно кросс-браузерный нет ... большинство сайтов, которые я видел с подобными эффектами (например, эффектом свечения), делают скрытый div, который отображается при фокусе / наведении мыши. Чтобы узнать, как это сделать, я бы искал SO для относительного макета CSS или как позиционировать элемент за использованием относительного - вам нужно беспокоиться о z-индексе, прозрачности и других проблемах, которые были бы решены в полном ответе. - person WSkid; 22.06.2011
comment
Вы можете использовать свойство outline; вы не получаете много вещей, которые может делать border (например, закругленные углы), но он работает (насколько мне известно) в каждом браузере. Более современным путем было бы использование box-shadow, которое позволяет вам делать гораздо больше, чем просто сплошную рамку, но его поддерживают только более поздние браузеры. - person Forest Katsch; 20.05.2013