Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2012, 12:21
Новичок на форуме
Отправить личное сообщение для san256 Посмотреть профиль Найти все сообщения от san256
 
Регистрация: 02.07.2012
Сообщений: 5

Остановка/ возобновление анимации фона
Имеется плавная смена картинки фона сайта. Но при определенных обстоятельствах она отвлекает (всплывает скрытый DIV с фото галереей). Очень хочется ее временно остановить, например запустив функцию, а после также успешно восстановить. Остановить ее получается, а вот запустить обратно без перезагрузки страницы - не выходит. Подскажите плз. что можно сделать?

var aImages = new Array();

	var iPrev = -1;
	var iRnd = -1;

	
	aImages[0] = "images/1.jpg";
	aImages[1] = "images/2.jpg";
	aImages[2] = "images/3.jpg";
	aImages[3] = "images/4.jpg";
	aImages[4] = "images/5.jpg";
	aImages[5] = "images/6.jpg";
	aImages[6] = "images/7.jpg";	
	


	
	 $(document).ready(function() {
		
		$("img#bg").load(function()

			{
				$("img#bg").fadeTo(2000,1);
				
				
		    	setTimeout(function() 
				
			    	{
			    		$("img#bg").fadeOut(2000);
						
			    		setTimeout(LoadImages,2500);
						
						
			    	}
			    	,5000);
			}			
		)
	
		
		setTimeout(LoadImages,1000);
    });

	   function LoadImage(iNr)
		{
	
		    $("img#bg").attr("src", aImages[iNr]);
		
  		 };

    function LoadImages()
    {
     	/* Select a random image number and make sure this is not equal to the previous image */
    	while(iPrev == iRnd)
    	{
    		iRnd = Math.floor(Math.random()*aImages.length);
    	}
     	/* Show the selected image */
    	LoadImage(iRnd);
    	iPrev = iRnd;

     };


НТМL:
<img   src="" alt="background" id="bg" style="display:none" />

CSS
Код:
img#bg {
    /* Stretch background */
        position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index:-3;
}
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2012, 12:32
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

san256,
1.Вариант классический: При запуске фотогалереи под нее подсовываем полупрозрачный тёмный фон скрывающий все отвлекающие факторы
2. Не увидел Ваших попыток останова - поэтому неясно что править
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2012, 12:45
Новичок на форуме
Отправить личное сообщение для san256 Посмотреть профиль Найти все сообщения от san256
 
Регистрация: 02.07.2012
Сообщений: 5

Сообщение от Deff Посмотреть сообщение
san256,
1.Вариант классический: При запуске фотогалереи под нее подсовываем полупрозрачный тёмный фон скрывающий все отвлекающие факторы
2. Не увидел Ваших попыток останова - поэтому неясно что править
Спасибо за ответ

По-первому варианту, такая идея меня посещала - это на случай того, если остановить с последующим успешным возобновлением не выйдет.

По-второму, попытки не считаются удавшимися, если анимация в принципе не возобновляется.
Ответить с цитированием
  #4 (permalink)  
Старый 02.07.2012, 12:47
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Сообщение от san256
По-второму, попытки не считаются удавшимися, если анимация в принципе не возобновляется.
Выложите неудачную - посколь нужно откуда то плясать
Ответить с цитированием
  #5 (permalink)  
Старый 02.07.2012, 16:13
Новичок на форуме
Отправить личное сообщение для san256 Посмотреть профиль Найти все сообщения от san256
 
Регистрация: 02.07.2012
Сообщений: 5

работает, но не знаю, совсем не изящно на мой взгляд, в этом деле я новичок, но по другому не смог придумать, как подменить переменные при загрузке изображения, при котором условие не может быть выполнено, в итоге анимация не останавливается, а просто нечего "анимировать". На страничке имеется две кнопочки. Одна вызывает функцию openGal (), другая соответственно функцию closedGal().


var iRnd = -1;

 <!-- off galery-->
function closedGal() {
iRnd = 0;
	$('.example').fadeOut(800);
$('#content').fadeIn(800).css({display:'block'});
LoadImages();
st();
};
	
 <!-- on galery-->

function openGal () {
$('.example').fadeIn(800);
$('#content').css({display:'none'});
iRnd = 0.5;


};     
 

<!--анимация фона-->
var aImages = new Array();

	var iPrev = -1;
	

	
	aImages[0] = "images/1.jpg";
	aImages[1] = "images/2.jpg";
	aImages[2] = "images/3.jpg";
	aImages[3] = "images/4.jpg";
	aImages[4] = "images/5.jpg";
	aImages[5] = "images/6.jpg";
	aImages[6] = "images/7.jpg";	
	




	 $(document).ready(function st() {
		
		$("img#bg").load(function()

			{
				$("img#bg").fadeTo(2000,1);
			
				
				
		    	setTimeout(function() 
				
			    	{
			    		$("img#bg").fadeOut(2000);
						
			    		setTimeout(LoadImages,2500);
						
						
			    	}
			    	,5000);
			}			
		)
	
	
		setTimeout(LoadImages,1000);
    });


	   function LoadImage(iNr)
		{
	
		    $("img#bg").attr("src", aImages[iNr]);
		
  		 };


    function LoadImages()
    {
     	/* Select a random image number and make sure this is not equal to the previous image */
    	while(iPrev == iRnd)
    	{
    		iRnd = Math.floor(Math.random()*aImages.length);
    	}
     	/* Show the selected image */
    	LoadImage(iRnd);
    	iPrev = iRnd;
		
     };

Последний раз редактировалось san256, 02.07.2012 в 16:17.
Ответить с цитированием
  #6 (permalink)  
Старый 02.07.2012, 16:39
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

san256,
Так - Пойдёт ?
<!--анимация фона-->
var aImages = new Array();

	var iPrev = -1;
	

	
	aImages[0] = "images/1.jpg";
	aImages[1] = "images/2.jpg";
	aImages[2] = "images/3.jpg";
	aImages[3] = "images/4.jpg";
	aImages[4] = "images/5.jpg";
	aImages[5] = "images/6.jpg";
	aImages[6] = "images/7.jpg";	
	


	var TimmmerID;

	 $(document).ready(function st() {
		
		$("img#bg").load(function()

			{
				$("img#bg").fadeTo(2000,1);
			
				
				
		    	TimmmerID=setTimeout(function() 
				
			    	{
			    		$("img#bg").fadeOut(2000);
						
			    		setTimeout(LoadImages,2500);
						
						
			    	}
			    	,5000);
			}			
		)
	
	
		setTimeout(LoadImages,1000);
    });


	   function LoadImage(iNr)
		{
	
		    $("img#bg").attr("src", aImages[iNr]);
		
  		 };


    function LoadImages()
    {
     	/* Select a random image number and make sure this is not equal to the previous image */
    	while(iPrev == iRnd)
    	{
    		iRnd = Math.floor(Math.random()*aImages.length);
    	}
     	/* Show the selected image */
    	LoadImage(iRnd);
    	iPrev = iRnd;
		
     };

 <!-- on galery-->
function openGal () {
  clearTimeout(TimmmerID);
};   
 <!-- off galery-->
function closedGal() {
  $("img#bg").load();
};

Последний раз редактировалось Deff, 02.07.2012 в 16:41.
Ответить с цитированием
  #7 (permalink)  
Старый 03.07.2012, 16:21
Новичок на форуме
Отправить личное сообщение для san256 Посмотреть профиль Найти все сообщения от san256
 
Регистрация: 02.07.2012
Сообщений: 5

отлично! Работает. Вот только иногда глючит... не пойму из-за чего Спасибо )
Ответить с цитированием
  #8 (permalink)  
Старый 03.07.2012, 17:11
Новичок на форуме
Отправить личное сообщение для san256 Посмотреть профиль Найти все сообщения от san256
 
Регистрация: 02.07.2012
Сообщений: 5

вопрос новичка
одного не пойму, каким образом функция load(function(){}) постоянно повторяется? Она по идее, нигде сама себя не вызывает...
Ответить с цитированием
  #9 (permalink)  
Старый 03.07.2012, 17:27
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Сообщение от san256
одного не пойму, каким образом функция load(function(){}) постоянно повторяется? Она по идее, нигде сама себя не вызывает..
$("img#bg").load() - инициализирует событие принудительно
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отмена действия события во время выполнения анимации gunsoy Общие вопросы Javascript 2 12.06.2012 13:27
Алгоритм плавной смены фона или изображения vandy3 Общие вопросы Javascript 6 11.11.2010 00:56
случайная смена фона сайта на jquery Netherlandman jQuery 8 25.08.2010 03:11
Как использовать спрайты для Inline-блоков в качестве фона в IE6? Nominus umbra (X)HTML/CSS 2 11.06.2010 21:58
остановка анимации sdff Общие вопросы Javascript 10 27.10.2008 23:55