Показать сообщение отдельно
  #2 (permalink)  
Старый 22.04.2014, 16:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

rev27, неназначайте переменные и id одинаково.
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
   #Bar{

     background-color: #FA8072;
   transition: all 2s;
	-moz-transition: all 2s; /* Firefox Support */
	-webkit-transition: all 2s; /* Chrome and Safari Support */
	-o-transition: all 2s; /* Opera Support */



   }

  </style>
</head>

<body>
<script>


    var result = function (r) {


if (r == "create box") {
divBar.style.opacity = "1";
}
if (r == "left") {
divBar.style.left = subFromDim(divBar.style.left, 50);
}
else if (r == "right") {
divBar.style.left = addToDim(divBar.style.left, 50);
}
else if (r == "up") {
divBar.style.top = subFromDim(divBar.style.top, 50);
}
else if (r == "down") {
divBar.style.top = addToDim(divBar.style.top, 50);
}
else if (r == "upscale") {   divBar.style.marginLeft ="100px";
  divBar.style.height = "140px";
    divBar.style.width = "140px";
}
else if (r == "normal") {
  divBar.style.height = "70px";
    divBar.style.width = "70px";
}
    };

var divBar;

function createDiv() {
    divBar = document.createElement("div");
    divBar.id = "Bar";
    divBar.style.border = "solid 0px #ffffff";
    divBar.style.backgroundColor = "f3e86d";
    divBar.style.top = "400px";
    divBar.style.opacity = "0";
    divBar.style.left = "500px";
    divBar.style.height = "70px";
    divBar.style.width = "70px";
    divBar.style.position = "absolute";
    document.body.appendChild(divBar);

}

function addToDim(orig, val) {
    var num = parseInt(orig);
    return((num + val) + "px");
}

function subFromDim(orig, val) {
    var num = parseInt(orig);
    return((num - val) + "px");
}

createDiv();
window.setTimeout(function ()
{  result("create box");
   result("upscale");
},500)
window.setTimeout(function ()
{  result("up");
   result("normal");
},2500)
window.setTimeout(function ()
{  result("left");
   result("upscale");
},4500)
</script>
</body>

</html>
Ответить с цитированием