StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Unfortunately, there is no simple way to do this. JQuery animations depend on having an element to animate. Since I assume you probably don't want the text itself to be animated, you will have to animate a different element.</p> <p>I made a <a href="http://jsfiddle.net/BeXSk/" rel="nofollow">fiddle</a> with a method that you can call to animate the highlighting. It will make a new element on the fly that will be animated, then throw the element away and replace it with a class that will use css to highlight the element.</p> <p><em>HTML</em></p> <pre><code><button id="highlight_trigger">Highlight</button> <span id="to_highlight">This text is what I want to highlight</span> </code></pre> <p><em>JS</em></p> <pre><code>$('#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'); } }); } </code></pre> <p><em>CSS</em></p> <pre><code>#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; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload