Эффект затухания JS не работает (для цикла)

Я попытался сделать эффект затухания JS с помощью функции setTimeout(), и он, похоже, работает в некоторой степени, но я не могу понять, что случилось с код ниже:Эффект затухания JS не работает (для цикла)

<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
function FadeEffect(n) 
{ 
    var i=1; 
    fade = document.getElementById("box"); 
    if (n===1) 
    { 
     fade.style.opacity=i/10; 
     i++; 
     setTimeout("FadeEffect(1)",50); 
     if (fade.style.opacity=1) 
     { 
     var i=1; 
     } 
    } 
    else if (n===0) 
    { 
     fade.style.opacity=1-i/10; 
     i++; 
     setTimeout("FadeEffect(0)",50); 
     if (fade.style.opacity=0) 
     { 
     var i=1; 
     } 
    } 
} 


</script> 
<style type="text/css"> 
#box{ 
width: 200px; 
height: 50px; 
border: 1px solid black; 
background-color: #ccc; 
opacity: 0; 
} 
</style> 
</head> 
<body> 
<div onMouseOver="FadeEffect(1)" onMouseOut="FadeEffect(0)" id="box">Menu</div> 
</body> 
</html>

Редактировать: обновлен код с помощью функций setTimeout().

источник

2011-12-28 Onion

Вы можете попробовать jQuery. Это очень приятно, и вы можете легко добавлять эффекты к элементам. – omnidan

Спасибо за предложение, но на вопрос все еще не ответил. Видите, я новичок, и я действительно хочу все понять. – Onion

В своем вопросе вы говорите, что используете «setTimeout()», но нет никаких вызовов на «setTimeout()» в опубликованном вами коде. – Pointy

Есть две проблемы с функцией, которую я вижу.

Во-первых, ваши заявления if выполняют как задание, нежели сравнение. Вы говорите if (n=0) (one =, присваивание), когда вы должны говорить if (n===0) (три ===, сравнение, или вы можете использовать два == для сравнения типов).

Во-вторых, использование цикла for для многократного изменения стиля не будет исчезать, поскольку браузер не обновляет отображение одновременно с выполнением кода - по сути, он использует тот же поток для отображения и для JavaScript. Таким образом, страница будет обновлена после выхода функции. Вы должны дать браузеру возможность обновить после каждой итерации, используя setTimeout() - что-то вроде:

function fadeEffect(element,startValue,target,delay){ 
    element.style.opacity = startValue; 
    if (startValue < target) 
     startValue = Math.min(startValue + 0.1, target); 
    else 
     startValue = Math.max(startValue - 0.1, target); 

    if (startValue != target) 
     setTimeout(function(){fadeEffect(element,startValue,target,delay);}, delay); 
} 

<div onMouseOver="fadeEffect(this, 1, 0, 100);" 
    onMouseOut="fadeEffect(this, 0, 1, 100);" id="box">Menu</div>

Демо: http://jsfiddle.net/hLQ6y/2/

EDIT: Обратите внимание, что этот код не справляется все, что блестяще, если вы двигаетесь мышь входила и выходила слишком быстро, т. е. если вы запускаете затухание до того, как закончится выцветание. (Вы можете видеть, что я имею в виду в моем jsfiddle.) Вы можете решить это, сохранив возврат с .setTimeout() и позвонив .clearTimeout(), если потребуется. Учитывая, что я уже рассмотрел суть вопроса, я оставил тонкую настройку в качестве упражнения для читателя ...

ОБНОВЛЕНИЕ: Ваш обновленный код ввел новые операторы if с тем же присваиванием, проблемы сравнения. Также он называет setTimeout() навсегда - вы должны сделать это условно, как в ответах Pointy и я дал. Также вы полагаетесь на переменную i, которая, как локальная переменная, не будет сохранять свое значение между вызовами - вы можете сделать ее глобальной, но лучше управлять ею как параметр, как я, или как локальная переменная в наружная функция подобный Pointy сделал.

источник

2011-12-28 15:03:52 nnnnnn

Спасибо за ваш ответ! – Onion

Еще раз спасибо за подробный ответ! Я провел некоторое исследование и узнал что-то новое о операторах и сравнениях. Теперь я вижу свои ошибки. – Onion

Проблема в том, что все эти изменения в стиле будут происходить до того, как браузер потрудится обновить дисплей. Что вам нужно сделать, это избавиться от изменений за гораздо более длительный период времени, используя «setTimeout()».

function fadeIn() { 
    function increment() { 
    box.style.opacity = Math.min(1.0, (opacity += 0.1)); 
    if (opacity < 1.0) { 
     setTimeout(increment, 100); 
    } 
    } 
    var box = document.getElementById('box'), opacity = 0; 
    box.style.opacity = opacity; 
    setTimeout(increment, 100); 
}

редактировать — Here является jsfiddle продемонстрировать.

источник

2011-12-28 14:59:21 Pointy

Я только что редактировал код с помощью функции setTimeout(), которая не работает. – Onion

Я работаю над jsfiddle, но на этом сайте сегодня очень медленно ... держись на секунде – Pointy

Я вижу, однако, не могли бы вы взглянуть на код, который я обновил. По какой-то причине это не работает. – Onion

Если вы хотите, чтобы он исчезал, вам нужно создать функцию, которая устанавливает непрозрачность -0.1 или +0.1, а затем вызывает себя с помощью setTimeout в 100 мс (или меньше). Если вы не позволите сценарию подождать, он будет слишком быстрым и сразу же установите opacity в 1.0.

В любом случае, вы можете сделать это намного проще с помощью jQuery.

источник

2011-12-28 15:00:41 omnidan

Эффект затухания JS не работает (для цикла)

ответ

Смежные вопросы