Javascript-форум - КАК СДЕЛАТЬ ДВИЖУЩИЕСЯ БЛОКИ?

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

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - КАК СДЕЛАТЬ ДВИЖУЩИЕСЯ БЛОКИ? (https://javascript.ru/forum/events/31839-kak-sdelat-dvizhushhiesya-bloki.html)

КАК СДЕЛАТЬ ДВИЖУЩИЕСЯ БЛОКИ?

доброго времени суток!!!
помогите, пожалуста не могк сделать движущиеся 2 блока внутри первого

принажатии на кнопку блок двигается ....
возможно ли это сделать с мопощью простейшей js -анимации и как,.... пожалуйста без jquaer
заранее спасибо

Brook,
можно конечно :lol:, ща пример сделаю

Dim@,
спасибо
)

Цитата:

Сообщение от Brook

jquaer

Так на моей памяти над ним ещё не извращались)) :lol:

trikadin,
наверно - не знаю, просто на всякий написал

Цитата:

Сообщение от Brook

возможно ли это сделать с мопощью простейшей js -анимации и как

менять им left или марджин лефт по таймеру . у родителя оверфлоу-х -хиден

честно содрано отсюда http://javascript.ru/blog/Andrej-Par...cii-JavaScript

<!DOCTYPE HTML>
<html>
  <head>
  <style>
    .example {
    width:50px;
      height:50px;
      border:1px solid black;
      position:absolute;
    }
    
    
    </style>
  
  </head>
  <body>

    <div id='example' class='example'>  </div>
    
   
    <a href='#' id='button' style="margin:150px;">show<a/>
    <script>
var bt = document.getElementById('button');
      
bt.onclick = animate;
 
function animate () {     
      
var element = document.getElementById("example");
var from = 0; // Начальная координата X
var to = 500; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта

setTimeout(function() {
    var now = (new Date().getTime()) - start; // Текущее время
    var progress = now / duration; // Прогресс анимации

    var result = (to - from) * delta(progress) + from;

    element.style.left = result + "px";

    if (progress < 1) // Если анимация не закончилась, продолжаем
        setTimeout(arguments.callee, 10);
}, 10);
function delta(progress) {
    return progress;
}
        
return false;
   }
    </script>

  </body>
</html>

cyber,
спасибо

но ЭтоНЕ ТО - я умею делать движение блоков мне надо что бы блок номер 2 двигался внутри блока 1, размер блока 1 меньше в 2 раза чем у номера 2 таким образом будет показана сначала левая часть потом правая!!

Цитата:

Сообщение от Brook (Сообщение 205963)

тут прикол в функции animate вы ее можете настроить как хотите

<!DOCTYPE HTML>
<html>
  <head>
  <style>
    .example {
    width:50px;
      height:50px;
      border:1px solid black;
      position:absolute;
      left:-25px;
    }
    
    .container{
    
    width:50px;
      height:50px;
       border:1px solid red;
    position:absolute;
    }
    </style>
  
  </head>
  <body>
   <div id='container' class='container'>
    <div id='example' class='example'>  </div>
    </div>
   
    <a href='#' id='button' style="margin:150px;">show<a/>
    <script>
var bt = document.getElementById('button');
      
bt.onclick = animate;
 
function animate () {     
      
var element = document.getElementById("example");
var from = -25; // Начальная координата X
var to = 25; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта

setTimeout(function() {
    var now = (new Date().getTime()) - start; // Текущее время
    var progress = now / duration; // Прогресс анимации

    var result = (to - from) * delta(progress) + from;

    element.style.left = result + "px";

    if (progress < 1) // Если анимация не закончилась, продолжаем
        setTimeout(arguments.callee, 10);
}, 10);
function delta(progress) {
    return progress;
}
        
return false;
   }
    </script>

  </body>
</html>