Остановка скрипта при наведении мыши
 

Здарова, прогеры! Помогите, пожалуйста, новичку в JavaScript. В меню есть ссылочка a#shining-text, по которой пробегает блик. Но при наведении мышки на эту ссылку, этот скрипт (блик) должен останавливаться, а ссылка гореть белым цветом :help:

Выглядит так: сама ссылка серая, по ней для привлечения внимания бегает блик. При наведении на ссылку, блик должен перестать бегать, а сама ссылка загореться белым (hover).

Сам скрипт:

(function($) {  
      
    $.fn.textAnimation = function(settings) {  
      
        var container = this;
        settings = $.extend({  
            mode : "roll"
        }, settings);
            
        function parse(e){
            if(e.hasClass("isTextAnimated")) return;
            var text = e.text();
            e.html("");
            for(var i=0;i< text.length;i++) {
                var span = $("<span></span>").text(text.charAt(i));
                e.append(span);
            }
            e.addClass("isTextAnimated");
        }
            
        function parseDiv(e,width,verticalAlign){
            if(e.hasClass("isTextAnimated")) return;
            var text = e.text();
            e.html("");
			
			//css setting
			var css = {position:"absolute"};
			verticalAlign = verticalAlign || "bottom";
			css[verticalAlign] = "0px";
            
			//width setting
			if(width === false) width = e.css("fontSize").replace(/px/,"")/1.25;
			
			for(var i=0;i< text.length;i++) {
				css.left = width*i;
                var div = $("<div></div>").text(text.charAt(i)).css(css);
				e.append(div);
            }
            e.addClass("isTextAnimated").css({position:"relative"});
        }
		
		function execute(options,start,finish){
			var time  = options.time;
			var interval = options.interval;
            var repeat = options.repeat;
            var startId;
			var amountInterval = interval + time;
			if(finish) amountInterval*=2;
			var e = options.e;
			
			if (options.onStart) {
				e.bind(options.onStart, function(){
					if (startId) return;
					start();
					if (repeat) {
						startId = setInterval(start, amountInterval);
						if (finish) {
							setTimeout(function(){
								finish();
								if (repeat) 
									setInterval(finish, amountInterval);
							}, amountInterval / 2);
						}
					}
				});
			} else {
                start();
                if(repeat) setInterval(start, amountInterval);
				if(finish) {
					setTimeout(function(){
                        finish();
                        if(repeat) setInterval(finish, amountInterval);
					},amountInterval/2);
				}
			}
			if (options.onFinish) {
                e.bind(options.onFinish, function(){
                    if (startId && repeat) {
						clearInterval(startId);
						startId = false;
					}
					if(finish) finish();
					
                });
			}
		}
        
		var f = {
            
            highlight:function(e){
                var options = $.extend({
                    e : e,
                    baseColor : "#666666",
                    highlightColor : "#FFFFFF",
                    delay : 50,
                    interval : 1500,
                    duration : 300,
                    repeat : true,
                    onStart : false,
                    onFinish : false
                },settings);
                
                parse(e);
                var i = 0;
                var elements = e.children().css({color:options.baseColor});
                var length = elements.length;
                if(!options.interval && !options.delay) options.interval = 100;
                var hc = options.highlightColor;
                var bc = options.baseColor;
                var du = options.duration;
                var de = options.delay;
                
                var start = function(){
                    elements.each(function(i){
                        var s = $(this);
                        setTimeout(function(){
                            s.animate({
                                color: hc
                            }, {
                                duration: du
                            }).animate({
                                color: bc
                            },{
                                duration: du
                            });
                        },de*i);
                    });
                };
                
                options.time = (options.delay * length);
                execute(options,start);
            }
		};
		
        return container.each(function(){  
            f[settings.mode]($(this));
        });
    };
  
})(jQuery);

Запуск скрипта:

$(document.body).ready(function(){
    $("a#shining-text").textAnimation({
        mode: "highlight"
    });
});

HTML код бы пригодлся

css блик по ссылке
 

идея devote
https://javascript.ru/forum/project/...tml#post375476

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<style>
  .bar {
    line-height: 1.6em;
    position:  relative;
    display: inline-block;
    background-color:  transparent;
    overflow: hidden;
    box-sizing: border-box;
    margin: 4px 6px;
    padding: 4px;
  }

  .bar:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 280%;
    height: 100%;
    animation: trololo 2s linear infinite;
    background-image: linear-gradient(90deg, #A9A9A9 15%, white 50%, #A9A9A9 85%);
    z-index: -10;
    background-repeat: repeat;
  }
  .bar:hover:before {
     background-image:  none;
     animation-play-state: paused;

  }

  @keyframes trololo {
    from {
      left: -150%;
    }

    to {
      left: -5%;
    }
  }
</style>

 <a href="" id="shining-text" class="bar">shining-text</a>
</body>

</html>

Да просто ссылка в меню с id="shining-text" :)

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
    <ul class="uk-navbar-nav uk-hidden-small">
        <li class='uk-active' itemprop="name"><a href="/" itemprop="url">Главная</a></li>
        <li  itemprop="name"><a href="/avtopark.php" itemprop="url" id="shining-text">Автопарк</a></li>
        ...
</ul>
</nav>

Esm1nec,
документация по плагину где?

Спасибо, интересный вариант! Попробую его применить и посмотреть, как выглядеть будет :victory: А если все же через JS события onmouse?

Тут брал сам плагин: http://pcvector.net/scripts/text_and...na-jquery.html

Вот так должно выглядеть:
Наводишь на "автопарк" и ссылка подсвечивается, как "главная".

блик по ссылке
 

Esm1nec,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background:#000;
  }

  ul{
    list-style:none;
    font-size:50px;
    display:flex;
    justify-content: center;
  }

  ul a{
    text-decoration:none;
    color:#FFF;
  }

  ul li{
    margin:20px;
  }

  .isTextAnimated span{
    transition: .6s;
    color:#666;
    animation:trololo 2.4s linear infinite;
  }

  .isTextAnimated:hover span{
    animation:none;
    color:#FFF;

  }

  @keyframes trololo{
    30%,70%{
      color:#666;
    }

    50%{
      color:#FFF;
    }
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  var e = $("#shining-text");
  var text = e.text();
  e.html("");
  for (var i = 0; i < text.length; i++) {
    var span = $("<span></span>", {style:"animation-delay :" + i * 100 + "ms;"}).text(text.charAt(i));
    e.append(span);
  }
  e.addClass("isTextAnimated");
});
  </script>
</head>

<body>

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
    <ul class="uk-navbar-nav uk-hidden-small">
        <li class='uk-active' itemprop="name"><a href="/" itemprop="url">Главная</a></li>
        <li  itemprop="name"><a href="/avtopark.php" itemprop="url" id="shining-text">Автопарк</a></li>
        ...
</ul>
</nav>

</body>
</html>

рони,
Явно лучше чем плагин.
Там и JQ и UI
так еще и setInterval любимый

j0hnik,
при желании можно этот вариант без JQ на js :)