Javascript-форум - помощь по jquerry анимации

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - помощь по jquerry анимации (https://javascript.ru/forum/dom-window/46753-pomoshh-po-jquerry-animacii.html)

помощь по jquerry анимации

Ребят нужна помощь.

Скрипт с части страницы, все настроено все отлично работает -

Код:

 <script>



    var rep = new agera.device(document.getElementById("device"));



    agera.onresult = function (reply, detail) {

      var r = detail.page.value;



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.height = "140px";

    divBar.style.width = "140px";

}

else if (r == "normal") {

  divBar.style.height = "70px";

    divBar.style.width = "70px";

}

    };



divBar = null;



function createDiv() {

    divBar = document.createElement("div");

    divBar.id = "divBar";

    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();



</script>

Как видно из скрипта, при получении значения переменной "r" происходит выполнение того или иного действия. Сейчас все происходит резко. Те было одно значение допустим размера стало другое. То же самое с перемещениями допустим при r == left, было одно значение позиции, при выполнение изменилось на 50. Что нужно? - применить jquerry анимацию для плавного перемещения блока. Либо если это изменение значений height;width, то тоже плавно а не от одного значения резко к другому. Очень нужна помощь тк знаний не хватает. Ибо с этим то скриптом то намучился чтобы все заработало. Если что могу по PayPal оплатить работу. Уверен что там дел на пол часа, на примере одного перемещения. Спасибо!:help:

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>

Ну так и пиши вместо

divBar.style.left = subFromDim(divBar.style.left, 50);

что-нить типо:

$(divBar).animate({ left: '-=50'}, 200);

А чтобы вправо сдвинуть: +=50. Аналогично и с top.
Или jQuery не используется и нужен аналог на чистом JS?

Цитата:

Сообщение от jsnb (Сообщение 308801)

Ну так и пиши вместо

divBar.style.left = subFromDim(divBar.style.left, 50);

что-нить типо:

$(divBar).animate({ left: '-=50'}, 200);

А чтобы вправо сдвинуть: +=50. Аналогично и с top.
Или jQuery не используется и нужен аналог на чистом JS?

пока на странице нет jquerry нигде но можно и его, в этом нет проблемы. js у меня сейчас чистый тк jquerry библиотеки не знаю как применять к тем же приведённым действиям

рони,
спасибо за ответ, через час протестирую :thanks:

Цитата:

Сообщение от rev27 (Сообщение 308805)

Ну так если есть возможность подключить jQuery, то подключайте и пишите как я выше показал. Ну или как выше написали можно анимировать через CSS transition.

Спасибо большое всем, все получилось все работает отлично!