Question

我刚写了一个非常简单的jQuery插件..有点，我想要一些帮助。

(function($){
    $.fn.highlight = function(words){
        return this.each(function(){
            //Get text from within
            var text = $(this).html();
            //Replace with new text
            $(this).html(text.replace(words,"<i class='highlight'></i><span class='word'>"+"$1"+"</span>"));
            //Get the all the highlight classes within this
            var highlights = $(this).find(".highlight");
            //Go through all
            return highlights.each(function(){
                var $this = $(this);
                //Get to the next word
                var wordDiv = $this.nextAll(".word").eq(0);
                //Set highlight span same height as word
                $this.height(wordDiv.height()+2);
                //Set highlight span same width +4 then positioning
                var newWidth = wordDiv.width()+4;
                wordDiv.replaceWith(function(){
                   return $(this).contents();
                });
                $this.width(newWidth+2).css({
                    left:(newWidth)+"px",
                    marginLeft: "-"+(newWidth)+"px"
                });
                $this.delay(Math.ceil(Math.random()*30)*200+2000).fadeOut("4000",function(){
                  $this.remove();
             });
        });         
        });
    }
})(jQuery);
$(document).ready(function(){
    $("div").highlight(/(simple|wrote|knowledge)/g);
});

和CSS：

.highlight{
    background: #FBB829;
    display: inline-block;
    position: relative;
    z-index: -1;
    top: 5px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

并且将CSS放入jQuery插件更好的做法是什么？这是一个jsFiddle：

http://jsfiddle.net/aVCtA/11/

当最后一个.highlight跨度消失时，你会看到我的文字移动。为什么？思想相对和z-index：-1会解决这个问题吗？

我应该使用绝对位置并计算定位吗？

Answer 1

最简单的解决方案是在淡出后不移除高光元素。您可以通过将淡入淡出更改为动画不透明度来实现此目的：

$this.delay(Math.ceil(Math.random()*30)*200+2000).animate({opacity: 0},4000);

这不是最美丽的解决方案，但出于您的目的，我认为没问题。

Answer 2

对您的代码进行了一些更改，请查看test on jsfiddle

更新日志：

<强>的jQuery ：

从以下行

中删除了.css()

$this.width(newWidth + 2);

<强> CSS ：

将样式更改为，

.highlight{
    background: #FBB829;
    display: inline-block;
    position: absolute;
    z-index: -1;
    top: 0px;
    margin-left: -2px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

Answer 3

这是另一种解决方案：

http://jsfiddle.net/aVCtA/20/

删除了CSS：

top:5px

JS改变：

删除了高度设置行添加了一个空白区域来设置其他字符的高度。删除额外的宽度，使其不会移动隐藏。

修复我的jQuery高亮插件

3 个答案: