Jquery sliding highlight

Question

I am using Jquery to highlight a span of text when a trigger is clicked.

I am looking for a way to have the text highlighted from left to right, instead of all in one go, to give a "real" feel - so that it looks like it's being highlighted by hand.

I can't find any documentation about this online.... Any ideas?

Here is the code:

(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");
};

pls can you show me your code anywhere? I dont understand what is your problem.. — daremachine, Jun 23 '13 at 15:08

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

You can use the methods explained here to accomplish what you are looking for.

Set a background: linear-gradient(to right, yellow 50%, white 50%); and then use background-position: left bottom; or background-position: right bottom; combined with transition:all 3s ease; to get the left-to-right effect.

Here is a JSFiddle derived from gar_onn's answer (link on the first line):
http://jsfiddle.net/23zea/

Hope this was what you were looking for.

edited May 23 '17 at 10:25

Community

1
1

answered Jun 23 '13 at 15:10

rktcool

356
1
11

Thanks a lot, though this fiddle doesn't seem to work... Is it fine on your end? – Julia Jun 23 '13 at 15:24
@Julia: Works like a charm for me. I tested it on Mozilla Firefox 21.0 and Google Chrome 27.0. Ensure that you have javascript enabled, and then try again. – rktcool Jun 23 '13 at 15:31
I found the problem, seems to not work on Safari.... Any way to fix it? Thanks so much! – Julia Jun 23 '13 at 15:43
are you not getting the change in background color? or are you not getting just the left-to-right effect? If the problem is just the left-to-right effect, you should add `-webkit-transition:all 3s ease;` to ensure support for transitions in Safari. – rktcool Jun 23 '13 at 15:47
On safari I'm getting neither actually..! The text stays with a white background. – Julia Jun 23 '13 at 15:49
I'm at a loss, sorry. But try making a HTML file of your own with the code from the jsfiddle to check if the problem lies with jsfiddle.net or the code. That ought to help. – rktcool Jun 23 '13 at 15:53
The jsfiddle works great when I open it in Chrome. I believe that safari doesn't support this linear-gradient. What a shame, because your solution is beautiful. Unfortunately i need it to work on all browsers :( I will try using @princejf 's solution – Julia Jun 23 '13 at 15:58

score 1 · Answer 2 · answered Jun 23 '13 at 15:10

1

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.

I made a fiddle 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.

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;
}

answered Jun 23 '13 at 15:10

princjef

135
1
1
9

Depends on if you want to support browsers that don't have transition or decent linear-gradient support. You raise a good point though. – princjef Jun 23 '13 at 15:15
Hey @princejef, thanks so much for your solution! It works great on jsfiddle, but when i copy/paste the code exactly into my work, the highlight happens all in one go, with no "slide"... Do you have a clue about what could have gone wrong? Thank you! – Julia Jun 23 '13 at 16:26
@Julia is the text being highlighted immediately or is it delayed by 500ms? And make sure you remove the background-color statement that you had before. It will override what I have written if they're both present – princjef Jun 23 '13 at 17:56
And @rktcool I think the other solution should work in Safari if you change linear-gradient to -webkit-linear-gradient with everything else the same. Linear gradient syntax is a mess right now. Check out [this page](http://css-tricks.com/css3-gradients/) for the full syntax breakdown. Sorry I would post this on your answer but I don't have the necessary rep yet. – princjef Jun 23 '13 at 18:03
@princejef it's delayed by 500ms – Julia Jun 23 '13 at 19:49
Alright I have a couple guesses. First, did you copy over the CSS too? The javascript depends on the CSS to properly display the animation. I suppose there could also be a problem with the `startPos` and `endPos` variables. Try hardcoding them as '100%' and '0%', respectively in the function just to see if that fixes it. Out of curiosity, what version of jQuery are you using? – princjef Jun 24 '13 at 00:34

Jquery sliding highlight

2 Answers2