Форум

DynkanMaclaud · #1 (**permalink**) 28.04.2016, 14:49

Ребят подскажите что в функции написать чтобы изменяла высоту до 0 за интервал времени

function mySlideUp(elem, time) {
			
				var element = document.querySelector(elem);
				
				var height = parseInt(getComputedStyle(element).height);
				
				var count = time/height;
				
				var step = height / count;
			
				var timer = setInterval(function(){
				
					var newHeight = parseInt(getComputedStyle(element).height);
		
					    newHeight = newHeight - step;
	
					if (newHeight <= 0) clearInterval(timer);
					
					element.style.height = newHeight + 'px'; 
				
				
				}, 50)
				
			}
			
			setTimeout(function() {
			
				mySlideUp('#box',2000)
			
			}, 2000)

ерунда какаято получается(((

Decode · #2 (**permalink**) 28.04.2016, 15:05

DynkanMaclaud, так?

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    #block {
      width: 300px;
      height: 300px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="block"></div>
  <button onclick="slideUp(document.getElementById('block'), 2000)">Жми сюда</button>

  <script>
    function slideUp(elem, duration) {
      var begin = performance.now();
      var startHeight = elem.offsetHeight;

      window.requestAnimationFrame(function animate(now) {
        var progress = (now - begin) / duration;

        progress > 1 && (progress = 1);
        
        elem.style.height = (startHeight) ? startHeight - startHeight * progress + 'px' : elem.style.height = progress * 256 + 'px';

        progress < 1 && window.requestAnimationFrame(animate);
      });
    }
  </script>
</body>
</html>

DynkanMaclaud · #3 (**permalink**) 28.04.2016, 15:43

Decode,Благодарю

Форум

Справочник

Discord чат

Курсы javascript