Surligneur coulissant Jquery

Question

J'utilise Jquery pour mettre en surbrillance une plage de texte lorsqu'un clic est effectué sur un déclencheur.

Je cherche un moyen de faire mettre le texte en surbrillance de gauche à droite, au lieu de tout en même temps, pour donner une «vraie» sensation - de sorte qu'il semble être mis en évidence à la main.

Je ne trouve aucune documentation à ce sujet en ligne .... Des idées?

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

Answer 1

Vous pouvez utiliser les méthodes expliquées here pour accomplir ce que vous recherchez.

Définissez un background: linear-gradient(to right, yellow 50%, white 50%); puis utilisez background-position: left bottom; ou background-position: right bottom; combiné avec transition:all 3s ease; pour obtenir l'effet de gauche à droite.

Voici un jsFiddle dérivé de la réponse de gar_onn (lien sur la première ligne):
http://jsfiddle.net/23zea/

Hope this était ce que vous recherchez.

Answer 2

Malheureusement, il n'existe pas de moyen simple de le faire. Les animations JQuery dépendent de l'existence d'un élément à animer. Puisque je suppose que vous ne voulez probablement pas que le texte soit animé, vous devrez animer un élément différent.

J'ai créé un fiddle avec une méthode que vous pouvez appeler pour animer la surbrillance. Il créera un nouvel élément à la volée qui sera animé, puis rejettera l'élément et le remplacera par une classe qui utilisera css pour mettre en évidence l'élément.

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