14.12.2012, 14:00
|
|
Интересующийся
|
|
Регистрация: 17.12.2011
Сообщений: 17
|
|
|
Плавное появление
Почему код:
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)
}
не работает? |
|
14.12.2012, 14:29
|
|
Аспирант
|
|
Регистрация: 12.10.2012
Сообщений: 90
|
|
Отлично работает. Ищите ошибку в другом месте.
<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-свойства представлены строками, а не числами. В случае с минусом браузер старается преобразовать первый элемент в число, а во втором случае спокойно складывает две строки.
Последний раз редактировалось Sanda, 14.12.2012 в 14:34.
|
|
15.12.2012, 23:46
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от 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>
|
|
18.12.2012, 18:26
|
|
Интересующийся
|
|
Регистрация: 17.12.2011
Сообщений: 17
|
|
А как в дальнейшем остановить выцветание или появление, если например нужно остановиться на 0.5 и тд.
Так же кст и в прокрутке страницы вверх или в низ, запустить запускаю, а как остановить хз.
// Функция прокрутки
function ale2(){
window.scrollBy(0, -5);
}
// Функция интервала
id2.onclick = function(){
var interv = window.setInterval("ale2()", 10);
}
}
|
|
18.12.2012, 23:37
|
 |
Аспирант
|
|
Регистрация: 14.09.2012
Сообщений: 83
|
|
Сообщение от Lestat621
|
А как в дальнейшем остановить выцветание или появление, если например нужно остановиться на 0.5 и тд.
[/JS]
|
если((элемент).прозрачность == 0.5) {
clearInterval(имя интервала времени);
} |
|
18.12.2012, 23:46
|
|
Интересующийся
|
|
Регистрация: 17.12.2011
Сообщений: 17
|
|
Пробовал так, нифига  |
|
19.12.2012, 21:36
|
|
Интересующийся
|
|
Регистрация: 17.12.2011
Сообщений: 17
|
|
Подскажите пожалуйста, уже весь форум облазил, а ответ не нашел. Думаю тут даже для новичков проблем нету.  |
|
20.12.2012, 08:37
|
|
жажду знаний
|
|
Регистрация: 17.07.2009
Сообщений: 202
|
|
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
Последний раз редактировалось bushstas, 20.12.2012 в 08:43.
|
|
20.12.2012, 21:17
|
|
Интересующийся
|
|
Регистрация: 17.12.2011
Сообщений: 17
|
|
|
Как jquery я знаю. Просто с js плохо, решил руку набить.
Твоя функция кстати не делает плавного перехода)
|
|
21.12.2012, 01:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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>
|
|
|
|
