jQuery 脉冲问题

Question

我正在使用来自 James Padolsey 的精彩 pulse plug-in 中的 modified version。它提供了脉冲功能而无需链接到 jQuery-UI，这对我来说很棒，因为我已经链接了 jQuery，并且如果我不需要的话不想打扰另一组工具......

我的问题是，是否有可能只有焦点边界脉冲，而不是整个元素。在当前的实现中，整个元素都会跳动，但我只希望焦点边框这样做，并且如果可能的话，只有当边框可见时（即用户已通过选项卡访问链接）。

提前致谢，

亚伦·肖万

编辑：Here's 一个测试页面来展示我的困境

编辑编辑：好的，我想我应该以不同的方式问这个问题......我当前的实现引用了带有类“link”和“piclink”的元素。是否可以专门引用焦点边框？

编辑编辑编辑：我发现了一些 JS functions 允许在样式表中操作 CSS 规则...我将尝试将这些与上述修改后的插件结合使用以实现我追求的是什么。我会更新我的发现。

Answer 1

虽然我没有查看插件，但希望这个小 sn-p 对您自己的解决方案有所帮助：

鉴于这个 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 example。单击按钮设置焦点，开始动画，然后单击页面上的其他位置，使其失去焦点并停止动画。

基本上，它只是将轮廓边框的大小从给定数量设置为 0，然后再返回。

然后它递归地调用相同的动画函数，使其保持在一个连续的循环中。但是，在每次递归调用之前，它都会检查以确保元素仍然是活动元素。

希望您可以从这里调整它以适应您的需要，因为它不能直接回答您的问题（对不起！）。