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

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

0 голосов
/ 28 декабря 2011

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

<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 ().

Ответы [ 3 ]

1 голос
/ 28 декабря 2011

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

Во-первых, ваши операторы if выполняют скорее присваивание, чем сравнение.Вы говорите if (n=0) (один =, назначение), когда должны произносить 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/

РЕДАКТИРОВАТЬ: обратите внимание, что этот код не 'Вы справляетесь со всем этим блестяще, если вы слишком быстро перемещаете мышь внутрь и наружу, т. е. если вы запускаете постепенное увеличение до того, как окончание постепенного исчезновения закончится.(Вы можете видеть, что я имею в виду в моем jsfiddle.) Вы можете решить эту проблему, сохранив возврат из .setTimeout () и вызвав .clearTimeout () , если потребуется.Учитывая, что я уже рассмотрел суть вопроса, оставлю тонкую настройку в качестве упражнения для читателя ...

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

1 голос
/ 28 декабря 2011

Проблема в том, что все эти изменения в стиле произойдут до того, как браузер потрудится обновить дисплей. Что вам нужно сделать, это распределить изменения в течение гораздо более длительного периода времени, используя 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);
}

изменить & mdash; Здесь - это jsfiddle для демонстрации.

0 голосов
/ 28 декабря 2011

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

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

...