0

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>

(Jクエリ)

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

2 に答える 2

1

残念ながら、これを行う簡単な方法はありません。JQuery アニメーションは、アニメーション化する要素があることに依存します。おそらくテキスト自体をアニメーション化したくないと思うので、別の要素をアニメーション化する必要があります。

ハイライトをアニメーション化するために呼び出すことができるメソッドをいじりました。アニメーション化される新しい要素をオンザフライで作成し、要素を破棄して、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;
}
于 2013-06-23T15:10:47.800 に答える