Исчезать в элементе HTML с необработанным JavaScript более 500 миллисекунд - PullRequest
Новая
       3

Исчезать в элементе HTML с необработанным JavaScript более 500 миллисекунд

1 голос
/ 22 апреля 2010

Я снова застрял в чем-то, чего просто не понимаю. Любая помощь будет оценена. Я работаю над модальным окном, вы что-то щелкаете, фон замаскирован, а модальное окно показывает некоторый контент. У меня есть div с «display: none» и «opacity: 0», и когда пользователь запускает модальный режим, этот div будет перекрывать все и иметь определенную прозрачность для него. На мой взгляд, что мне нужно сделать, это: Установите непрозрачность Выполните цикл «for», который проверит, меньше ли непрозрачность, чем желаемое значение. Внутри этого цикла выполните setInterval, чтобы постепенно увеличивать значение непрозрачности, пока оно не достигнет желаемого значения. Когда желаемое значение достигнуто, выполните оператор «if» для «clearInterval». Мой код пока выглядит следующим образом: 

var showMask = document.getElementById('mask');
function fireModal(){
showMask.style.opacity = 0;
showMask.style.display = 'block';
var getCurrentOpacity = showMask.style.opacity;
var increaseOpacity = 0.02;
var finalOpacity = 0.7;
var intervalIncrement = 20;
var timeLapse = 500;
function fadeIn(){
    for(var i = getCurrentOpacity; i < finalOpacity; i++){
        setInterval(function(){
            showMask.style.opacity = i;   
        }, intervalIncrement)    
    }
    if(getCurrentOpacity == finalOpacity){
        clearInterval();
    }
}
fadeIn();
}

Как вы все можете догадаться, это не работает, все, что он делает, это устанавливает непрозрачность на «1», не постепенно ее увеличивая. Заранее спасибо за помощь.

Ответы [ 2 ]

2 голосов
/ 22 апреля 2010

Вы должны использовать jquery, mootools или extjs для чего-то подобного.

Но в основном вам нужно сделать это: 

var id = setInterval(function() {
   showMask.style.opacity += .05;
   if (showMask.style.opacity >= 1)
   {
      clearInterval(id);
   }
},200)

Это исчезнет через 2 секунды.

0 голосов
/ 22 апреля 2010

Считай меня другим, который настоятельно рекомендует использовать jQuery. В моей рабочей среде я часто сталкиваюсь с подобными проблемами из-за корпоративных боссов, которые в основном боятся любого и всякого продвижения, поэтому я понимаю ваше затруднительное положение. Но, как говорится, мое предложение состоит не в том, чтобы тратить время на переписывание колеса, а на то, чтобы выяснить, как использовать правильное решение, которое в данном случае является jQuery или другой структурой javascript. Если вы можете написать свою собственную функцию, вы можете использовать jQuery. 

<script>
  document.write("<scr" + "ipt src='http://givemejquery'></scr" + "ipt>");
</script>
...