jQuery pulse question

I'm using a slightly modified version of the wonderful pulse plug-in from James Padolsey. It provides the pulse functionality without having to link to jQuery-UI, which for me is great since I already have jQuery linked and don't want to bother with another set of tools if I don't have t开发者_开发问答o...

My question is, is it possible to have only the focus border pulse, rather than the entire element. With the current implementation, the entire element pulses, but I want only the focus border to do so and if possible, only when the border is visible (i.e., the user has tabbed to a link).

Thanks in advance,

Aaron Chauvin

Edit: Here's a test page to demonstrate my dilema

Edit Edit: Ok, guess I should've asked this question differently... My current implementation references the elements with classes "link" & "piclink". Is it possible to specifically reference the focus border?

Edit Edit Edit: I've found some JS functions which allow the manipulation of CSS rules in stylesheets... I'm going to try to use these in conjunction with the above modified plug-in in order to achieve what I am after. I'll update with my findings.

While I didn't look at the plugin, hopefully this little snippet will help a bit to your own solution:

Given this css:

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

You can write something like:

// 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);
           }
       }
    );
}

Here is a simple jsfiddle example. Click the button to set the focus, which starts the animation, then click somewhere else on the page so it loses focus and stops animating.

Basically, it is just animating the size of the outline border from a given amount to 0, and back.

It then calls recursively the same animate function so that it stays in a continuous loop. But, before each recursive call it checks to make sure that the element is still the active one.

Hopefully from here you can adjust this to fit what you need, as it doesn't answer your question directly (sorry!).