» » Функция мигания

Функция мигания

12-09-2014, 03:03
Автор: .
Просмотров: 1 168
Комментариев: 0
Версия для печати
 
 
Реализовано мигание любым элементом на странице следующим образом:
 

	 
	function blink(id,opacity,speed,interval){ window.setTimeout(function(){ $(id).animate({"opacity":opacity}, speed); $(id).animate({"opacity":"1"}, speed); window.setTimeout(function(){ blink(id,opacity,speed,interval);}, interval);}, interval);}
	 
	blink('.blink','0.1',600,2000); 
	 
	
 
где 
blink('.blink','0.1',600,2000); 
blink('ид_или_класс','глубина opacity',скорость мигания,задержка повторения); 
 
 
Помимо данной функции, был вариант использовать возможности анимации в css3
 

	
		
	.blinker {
	    -webkit-animation-name: blinker;
	    -webkit-animation-duration: 1s;
	    -webkit-animation-timing-function: linear;
	    -webkit-animation-iteration-count: infinite;
	    
	    -moz-animation-name: blinker;
	    -moz-animation-duration: 1s;
	    -moz-animation-timing-function: linear;
	    -moz-animation-iteration-count: infinite;
	    
	    animation-name: blinker;
	    animation-duration: 1s;
	    animation-timing-function: linear;
	    animation-iteration-count: infinite;
	}
	
		
	@-moz-keyframes blinker {  
	    0% { opacity: 1.0; }
	    50% { opacity: 0.0; }
	    100% { opacity: 1.0; }
	}
	
		
	@-webkit-keyframes blinker {  
	    0% { opacity: 1.0; }
	    50% { opacity: 0.0; }
	    100% { opacity: 1.0; }
	}
	
		
	@keyframes blinker {  
	    0% { opacity: 1.0; }
	    50% { opacity: 0.0; }
	    100% { opacity: 1.0; }
	}
 
 
в связке с toggle
 

	$('.blink').each(function() {
	  
	    setInterval(function() {
	        $( ".blink" ).toggleClass( "blinker" );
	    }, 2000);
	});
 

Рейтинг статьи:
  
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.