Javascript-форум - Плавное появление

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Плавное появление (https://javascript.ru/forum/dom-window/33934-plavnoe-poyavlenie.html)

Lestat621

14.12.2012 14:00

Плавное появление

Почему код:

function opacity(element, speed){
	setInterval(function(){
		if(!element.style.opacity){
			element.style.opacity = 1;
		}
	        element.style.opacity = element.style.opacity - 0.08;
	}, speed)
}

Работает. А код:

function opacity(element, speed){
	setInterval(function(){
		if(!element.style.opacity){
			element.style.opacity = 0;
		}
	        element.style.opacity = element.style.opacity + 0.08;
	}, speed)
}

не работает?

Sanda

14.12.2012 14:29

Отлично работает. Ищите ошибку в другом месте.

<div style="background-color: red">HELLO</div>
<script>
function opacity(element, speed){
    setInterval(function(){
        if(!element.style.opacity){
            element.style.opacity = 0;
        }
            element.style.opacity = element.style.opacity + 0.08;
    }, speed)
}
opacity(document.getElementsByTagName('div')[0], 1000);
</script>

Вероятно, после исполнения кода второй раз получается что-то типа opacity = '0.080.08'. Потому что style-свойства представлены строками, а не числами. В случае с минусом браузер старается преобразовать первый элемент в число, а во втором случае спокойно складывает две строки.

рони	15.12.2012 23:46

Цитата:

Сообщение от Sanda

Отлично работает.

Код нерабочий, но вы правильно указали причину, почему он не работает.
Рабочий код ...

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>

<body>
<div style="background-color: red">HELLO</div>
<script>
function opacity(element, speed){
    setInterval(function(){
        if(+element.style.opacity>1||!element.style.opacity){
            element.style.opacity = 0;
        }
        element.style.opacity = +element.style.opacity + 0.08;
    }, speed)
}
opacity(document.getElementsByTagName('div')[0], 1000);
</script>
</body>
</html>

Lestat621

18.12.2012 18:26

А как в дальнейшем остановить выцветание или появление, если например нужно остановиться на 0.5 и тд.

Так же кст и в прокрутке страницы вверх или в низ, запустить запускаю, а как остановить хз.

// Функция прокрутки
			function ale2(){ 
				window.scrollBy(0, -5);
			}
			// Функция интервала
			id2.onclick = function(){
				var interv = window.setInterval("ale2()", 10);
				}
			}

Margarita

18.12.2012 23:37

Цитата:

Сообщение от Lestat621 (Сообщение 222148)

А как в дальнейшем остановить выцветание или появление, если например нужно остановиться на 0.5 и тд.
[/JS]

если((элемент).прозрачность == 0.5) {
clearInterval(имя интервала времени);
}

Lestat621

18.12.2012 23:46

Пробовал так, нифига :no:

Lestat621

19.12.2012 21:36

Подскажите пожалуйста, уже весь форум облазил, а ответ не нашел. Думаю тут даже для новичков проблем нету.:)

bushstas

20.12.2012 08:37

function opacity(element, speed, max_opac){
    I=window.setInterval(function(){
        if(+element.style.opacity>max_opac||!element.style.opacity){
            element.style.opacity = max_opac; window.clearInterval(I)
        }else{element.style.opacity = +element.style.opacity + 0.08;
		}
		
    }, speed)
}
opacity(element,1000,0.5);
//где третий аргумент нужное значение прозрачности 
// может как-то так

// а вообще на jQuery это слишком даже просто сделать 
$(element).animate({opacity:0.5},2000) // то есть за 2 секунды элемент увеличит непрозрачность до 0.5

Lestat621

20.12.2012 21:17

Как jquery я знаю. Просто с js плохо, решил руку набить.
Твоя функция кстати не делает плавного перехода)

рони	21.12.2012 01:26

Lestat621,
Вариант с остановкой ... кликнуть по надписи.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>

<body>
<div style="background-color: red">click</div>
<script>
var interv,id2 ;
id2 = document.getElementsByTagName('div')[0];
function opacity(element, speed){
  interv =  setInterval(function(){
        if(+element.style.opacity>1||!element.style.opacity){
            element.style.opacity = 0;
        }
        element.style.opacity = +element.style.opacity + 0.08;
    }, speed)
}

id2.onclick = function(){
				clearInterval(interv)
				}


opacity(id2, 1000);
</script>
</body>
</html>

Часовой пояс GMT +3, время: 22:12.

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице