Форум

dee3000 · #1 (**permalink**) 27.06.2015, 21:02

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
	<div id="block" style="visibility: hidden; width: 400px; height: 40px; border: 1px solid black;"></div>
	<textarea style="width: 300px heihgt: 200px;" onfocus="focus1();" onblur="blur1();"></textarea>
    <script type="text/javascript">
	var block = document.getElementById('block');
	
    function focus1()
		{
		block.style.visibility = 'visible';
		}
		
	function blur1()
		{
		block.style.visibility = 'hidden';
		}
    </script>

  </body>
</html>

Хочется чтоб блок появлялся не моментально а медленно (выезжал или типо того). Как это сделать?

рони · #2 (**permalink**) 27.06.2015, 22:02

dee3000,

<!DOCTYPE html>
<html>
  <head>
  <style type="text/css">
  div{
     -webkit-transition: all 10s ease-in-out;
     -moz-transition: all 10s ease-in-out;
     -o-transition: all 10s ease-in-out;
     transition: all 10s ease-in-out;
background-color: #FF00FF;
  }
  </style>
  </head>
  <body>
	<div id="block" style="opacity: 0; width: 400px; height: 40px; border: 1px solid black;">123</div>
	<textarea style="width: 300px heihgt: 200px;" onfocus="focus1();" onblur="blur1();"></textarea>
    <script type="text/javascript">
	var block = document.getElementById('block');

    function focus1()
		{
		block.style.opacity = '1';
		}

	function blur1()
		{
		block.style.opacity = '0';
		}
    </script>

  </body>
</html>