2

我正在使用James Padolsey的精彩脉冲插件的略微修改版本。它提供了脉冲功能而无需链接到 jQuery-UI，这对我来说很棒，因为我已经链接了 jQuery，并且如果我不需要的话，不想打扰另一组工具......

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

提前致谢，

亚伦·肖文

编辑：这是一个测试页面来展示我的困境

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

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

4

1 回答 1

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，然后返回。

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

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

于 2011-06-21T03:55:43.103 回答