Question

我在点击触发器时使用Jquery突出显示文本范围。

我正在寻找一种方法让文字从左到右突出显示，而不是一次性突出显示，以给出“真实”的感觉 - 这样它看起来就像是手工突出显示的。

我在网上找不到任何有关此内容的文档....任何想法？

以下是代码：

（HTML）

The Law of Universal Gravitation is based on the observed fact 
that all masses attract all other masses. The force of 
<span id="to_highlight">attraction decreases as the distance 
between the masses increases.</span>

（JQuery的）

if (count==4) {
  $('#to_highlight').css("background-color","#e8c5e8");
};

Answer 1

您可以使用here解释的方法来完成您的目标。

设置background: linear-gradient(to right, yellow 50%, white 50%);，然后使用background-position: left bottom;或background-position: right bottom;与transition:all 3s ease;相结合，以获得从左到右的效果。

这是一个源自gar_onn答案的JSFiddle（第一行的链接）：
http://jsfiddle.net/23zea/

希望这就是你要找的东西。

Answer 2

不幸的是，没有简单的方法可以做到这一点。 JQuery动画依赖于有一个动画元素。由于我假设您可能不希望文本本身具有动画效果，因此您必须为其他元素设置动画。

我使用一种方法制作了fiddle，您可以调用该方法为突出显示设置动画。它将动画制作一个新的元素，然后将元素抛弃并将其替换为将使用css突出显示元素的类。

HTML 的

<button id="highlight_trigger">Highlight</button>
<span id="to_highlight">This text is what I want to highlight</span>

JS

$('#highlight_trigger').on('click', function() {
    var toHighlight = $('#to_highlight');
    if(toHighlight.hasClass('highlighted')) {
        highlightAnimation(toHighlight, false, 500);
    } else {
        highlightAnimation(toHighlight, true, 500);
    }
});

function highlightAnimation($elem, show, duration) {
    var startPos;
    var endPos;
    if(show) {
        startPos = '100%';
        endPos = '0%';
    } else {
        startPos = '0%';
        endPos = '100%';
        $elem.removeClass('highlighted');
    }
    var highlight = $('<div />').addClass('highlight_box').css('right', startPos);
    $elem.append(highlight);
    highlight.animate({right: endPos}, duration, function() {
        highlight.remove();
        if(show) {
            $elem.addClass('highlighted');
        }
    });
}

CSS

#to_highlight {
    display: inline-block;
    position: relative;
}

#to_highlight.highlighted, .highlight_box {
    background-color: yellow;
}

.highlight_box {
    display: block;
    position: absolute;
    top: 0; bottom: 0; left: 0;
    z-index: -1;
}

Jquery滑动突出显示

2 个答案: