Показать сообщение отдельно
  #1 (permalink)  
Старый 18.03.2018, 12:22
Аватар для Esm1nec
Новичок на форуме
Отправить личное сообщение для Esm1nec Посмотреть профиль Найти все сообщения от Esm1nec
 
Регистрация: 18.03.2018
Сообщений: 8

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

Выглядит так: сама ссылка серая, по ней для привлечения внимания бегает блик. При наведении на ссылку, блик должен перестать бегать, а сама ссылка загореться белым (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"
    });
});
Ответить с цитированием