Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Скрытый блок (https://javascript.ru/forum/misc/28917-skrytyjj-blok.html)

GrizzlyBear 07.06.2012 08:22

Скрытый блок
 
Скрытый блок при нажатии по ссылке открывается блок
что приписать надо, чтобы блок не просто появлялся а плавно выезжал

walik 07.06.2012 11:51

Основы программной анимации на JavaScript

Либо найти в нете готовый код.

Или если используется какой то фреймворк, то возможно он имеет соответствующую функцию.

Dim@ 07.06.2012 12:34

<html>
  <head> </head>
  <body>

    <script>
ok=true;
      document.num = 0;
      document.num2 = 1;
      function BLOK(){
      document.block = document.getElementById('block');
        if(ok == true){
document.num=0;
        smena()
        }
        else{document.num2=1;smena2()}
      }
      function smena(){
        document.num +=0.15;
        if(document.num > 1) return;
        document.block.setAttribute('style','opacity:'+document.num)
      setTimeout('smena()',100)
          }
      function smena2(){
      document.num2 -=0.15;
        if(document.num2 < 0){document.block.setAttribute('style','opacity:'+document.num2);return;}
        document.block.setAttribute('style','opacity:'+document.num2)
      setTimeout('smena2()',100)
      }
    </script>
    <a onclick='BLOK();if(ok==true){ok=false;}else{ok=true};return false' href='file:\\\lol'>Блок</a>
    <div id='block' style='opacity:0'>Я скрытый блок</div>
  </body>
</html>

GrizzlyBear 07.06.2012 12:43

Dim@

Это не совсем то
Нужно чтобы он не появлялся, а плавно выезжал

Dim@ 07.06.2012 12:48

когда код заключаешь в теги js или html к первому тегу добавляешь run типа [js run]

GrizzlyBear 07.06.2012 12:58

Добавил работать отказывается почему то
все перепроверил, все ровно не работает

Deff 07.06.2012 13:08

Цитата:

Сообщение от GrizzlyBear
Нужно чтобы он не появлялся, а плавно выезжал

Чтобы плавно выезжал нун подключать библиотеку jQuery
К примеру так
<script src="http://code.jquery.com/jquery-1.7.2.min.js">

Тут есть примеры http://forumd.ru/viewtopic.php?id=1378&p=2#p68964 пост 13

Dim@ 07.06.2012 13:10

<body>
<script type='text/javascript'>
num=-200
function viezd(){
num+=5;
if(num > 0) return;
block = document.getElementById('vnytr');
block.setAttribute('style','position:absolute;left:'+num+'px')
setTimeout('viezd()',100)
}
</script>
<a onclick='viezd();return false' href='file:\\\lol'>Выезд блока</a>
<div id='vnesh' style='width:400px;height:40px;position:absolute;left:0px;'><div id='vnytr' style='position:absolute;left:-200px'>Скрытый блок</div></div>

Вам нужно такое подобие?

GrizzlyBear 07.06.2012 13:33

Лан не парьтесь пока что
ща разберусь с кодом сделаю нормальный наглядный пример

Dim@ 07.06.2012 15:38

Цитата:

Сообщение от GrizzlyBear (Сообщение 179726)
Добавил работать отказывается почему то
все перепроверил, все ровно не работает

вы код окружите тегами [html]
и в них добавьте run

GrizzlyBear 07.06.2012 16:56

Как бы лучше объяснить
Нужно не появление не выезд а как бы
что бы он потихоньку открывался что ль, плавно а не так резко
с верху в низ

walik 07.06.2012 17:20

<!DOCTYPE HTML>
<html>
  <head>
    *!*<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>*/!*
  </head>
  <body>
    <a href="#" onclick="*!*$('#block').slideDown(3000);*/!*return false;">Показать</a>
    <div id="block" style="width: 100px;height: 100px;background:red;display: none;"></div>
  </body>
</html>

GrizzlyBear 07.06.2012 17:27

Вот то что нужно
Только при повторном нажатии блок должен так же плавненько "исчезать"
А обязательно джквери ?
есть способ в мой код добавить что либо ?

walik 07.06.2012 17:57

Цитата:

Сообщение от GrizzlyBear
Только при повторном нажатии блок должен так же плавненько "исчезать"

Ну поставь условие и будет тебе счастье :)

Цитата:

Сообщение от GrizzlyBear
А обязательно джквери ?
есть способ в мой код добавить что либо ?

Я тебе написал в первом сообщение, если без JQuery то:
Читаешь статью, и сам пишешь свою функцию такую, либо ищешь в нете готовую.


Часовой пояс GMT +3, время: 12:54.