Как сделать без jquery плавное выезжающие элементы?

vvsh · June 7, 2009

всем хай.

заранее спс.

Styx · June 7, 2009

С помощью метода setInterval объекта window. В callback-функции нужно будет по небольшим шажкам увеличивать атрибут (например, width там, или left) до тех пор пока элемент не будет показан целиком.

s0rr0w · June 8, 2009

С помощью метода setInterval объекта window. В callback-функции нужно будет по небольшим шажкам увеличивать атрибут (например, width там, или left) до тех пор пока элемент не будет показан целиком.

Сразу хочу предупредить о западле. Называется оно - ИЕ и его дибильная поддержка стандартов. В функцию setInterval нельзя передавать параметры. Приходится извращаться таким образом

setInterval( function( v1, v2 ){ return function(){ alert( v1 + " " + v2 ) } }( "var1", "var2" ), 1000 );

AMD · June 8, 2009

как раз сегодня этим занимаюсь.

отпишусь

SelenIT · June 11, 2009

ИЕ и его дибильная поддержка стандартов. В функцию setInterval нельзя передавать параметры.

s0rr0w, а в Опере разве можно? Если да, то давно?

Хотя, по мне, для анимации передавать параметры особо ни к чему — вся нужная инфа уже есть в свойствах стиля анимируемого объекта (а если не вся, так никто не мешает навесить на него кастомное свойство)...

AMD · June 11, 2009

у кого нить получалось? :lol:

Searcher · June 11, 2009

Вот кусок моего кода:

		idn = "div1" // идентификатор объекта
	curHeight = 15; // первоначальная высота в %
	curWidth = 15;  //  первоначальная ширина в %
		maxHeight = "90";  //  конечная высота в %
		maxWidth = "90";  //  конечная ширина в %
	n = 15; // количество итераций
	sec = 50; // интервал между итерациями
	for(i=1;i<=n;i++){
		curHeight = 15+Math.round(((maxHeight-15)/n)*i);
		curWidth = 15+Math.round(((maxWidth-15)/n)*i);
		setTimeout("document.getElementById('" + idn + "').style.height = '" + curHeight + "%'; document.getElementById('" + idn + "').style.width = '" + curWidth + "%';", sec);
		sec = sec+50;
	}

Edited June 11, 2009 by Searcher

Styx · June 11, 2009

у кого нить получалось?

Вот... :lol:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Template</title>

   <style type="text/css">
      div.submenu {
         background: #00AA00;
         overflow: hidden;
         width: 200px;
      }
   </style>

   <script type="text/javascript">
      var timeoutID = 0;
      var currentHeight = 0;
      function dropDwn() {
         if (currentHeight < maxMenuHeight) {
            currentHeight += 5;
            scroll_menu.style.height = currentHeight.toString() + "px";
         } else {
            window.clearInterval(timeoutID);
            timeoutID = 0;
         }
      }   
      function dropBack() {
         if (currentHeight > 5) {
            currentHeight -= 5;
            scroll_menu.style.height = currentHeight.toString() + "px";
         } else {
            scroll_menu.style.height = "0px";
            window.clearInterval(timeoutID);
            timeoutID = 0;
            currentHeight = 0;
         }
      }   
      function show(linkobj) {
         if (timeoutID != 0) {window.clearInterval(timeoutID);}
         linkobj.parentNode.innerHTML="<a href='#' onclick='hide(this);'>Collapse menu</a>";
         timeoutID = window.setInterval("dropDwn()", 10);
      }
      function hide(linkobj) {
         if (timeoutID != 0) {window.clearInterval(timeoutID);}
         linkobj.parentNode.innerHTML="<a href='#' onclick='show(this);'>Expand menu</a>";
         timeoutID = window.setInterval("dropBack()", 10);
      }
   </script>

</head>

<body>
   <div><a href="#" onclick="show(this);">Expand menu</a></div>
   <div class="submenu" id="scrollMenu">
      <a href="#">Lorem</a><br />
      <a href="#">ipsum</a><br />
      <a href="#">dolor</a><br />
      <a href="#">sit</a><br />
      <a href="#">amet</a>
   </div>

   <script type="text/Javascript">
      var  scroll_menu = document.getElementById("scrollMenu");
      var maxMenuHeight = scroll_menu.offsetHeight;
      scroll_menu.style.height = "0px";
   </script>

</body>

</html>

AMD · June 11, 2009

Спасибо.

Очень пригодится :lol:

vvsh · June 11, 2009

Styx, спасибо те огромное

vvsh · June 11, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Template</title>

<script type="text/javascript">
var timeoutID = 0;var currentHeight = 0;

function dropDwn() {
if (currentHeight < maxMenuHeight) {
currentHeight += 5;scroll_menu.style.height = currentHeight.toString() + "px";
} else {
window.clearInterval(timeoutID);timeoutID = 0;
}
}

function dropBack() {
if (currentHeight > 5) {
currentHeight -= 5;scroll_menu.style.height = currentHeight.toString() + "px";
} else {
scroll_menu.style.height = "0px";window.clearInterval(timeoutID);timeoutID = 0;currentHeight = 0;
}
}

function shide(linkobj,type) {
div = document.getElementById('scrollMenu');
if(type=='slow') speed = '20';
if (timeoutID != 0) {window.clearInterval(timeoutID);}
if(scroll_menu.style.height=='0px') {
timeoutID = window.setInterval("dropDwn()", speed);
} else {
timeoutID = window.setInterval("dropBack()",speed);
}
}
</script>

</head>

<body>
<div><a href="#" onclick="shide(this,'slow');">Expand menu</a></div>
<div class="submenu" id="scrollMenu" style="overflow: hidden;">
<a href="#">Lorem</a><br />
<a href="#">ipsum</a><br />
<a href="#">dolor</a><br />
<a href="#">sit</a><br />
<a href="#">amet</a>
</div>

<script type="text/Javascript">
var scroll_menu = document.getElementById("scrollMenu");
var maxMenuHeight = scroll_menu.offsetHeight;
scroll_menu.style.height = "0px";
</script>

</body>

</html>

модифицированный вариант, одной функцией, с проверкой.

s0rr0w · June 11, 2009

модифицированный вариант, одной функцией, с проверкой.

А что будет, если запустить одновременно два сворачивающихся блока? А если они разной высоты будут?

Aleko · June 15, 2009

Скриптовая анимация

sc@r@bey · June 16, 2009

http://buildinternet.com/2009/01/how-to-ma...nu-with-jquery/

в разделе плагинов на оффсайте много способов реализации, уже готовых!

Edited June 16, 2009 by sc@r@bey

Sign In

Как сделать без jquery плавное выезжающие элементы?

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information