javascript - 在聚焦元素周围放置边框

Question

我希望焦点元素(主要使用 Tab 键导航)与元素大小的周围矩形一起出现。我在 html 中创建了适当的 div，并使用适当的 css 来设置边框颜色，并在导航开始时不显示。我正在尝试使用 jquery 更改显示(大小和位置)，但出现问题。

jQuery('*').focus(function () {
    var position = jQuery(this).offset();
    var width = jQuery(this).width();
    var height = jQuery(this).height();
    console.log(jQuery(this).width(), jQuery(this).height(), position);
    jQuery('#focuser').fadeOut(0); //to have the div disappear if it is on other element
    jQuery('#focuser').css({width: '2px', height: '2px'}); //to get an enlarging effect
    jQuery('#focuser').offset({top: position.top, left: position.left});
    jQuery('#focuser').fadeIn(100, function () {
        jQuery('#focuser').animate({width: width, height: height}, 200);
    });
    console.log(jQuery('#focuser').width(), jQuery('#focuser').height(), jQuery('#focuser').offset());
});

jQuery(this) 的位置检索是正确的，但是当我将其设置为偏移量时，它似乎是添加该值而不是替换它。我错过了什么吗？这是管理它的正确方法吗(带有伪元素的完整CSS解决方案:焦点不起作用，因为边框被添加到元素大小并破坏了页面显示，边框需要有动画)？

#focuser {
   border: 2px $second-font-color solid;
   display: none;
   position: absolute;
}

感谢您的帮助

Answer 1

我想我找到了解决方案，但我不明白为什么会这样。我将淡出放在变量设置之前，它看起来可以工作。

jQuery('*').focus(function () {
    jQuery('#focuser').fadeOut(0);
    var position = jQuery(this).offset();
    var width = jQuery(this).width();
    var height = jQuery(this).height();
    jQuery('#focuser').fadeIn(0);
    jQuery('#focuser').css({width: 0, height: 0});
    jQuery('#focuser').offset({top: position.top, left: position.left});
    jQuery('#focuser').animate({width: width, height: height}, 200);
});