изменение со временем

[supernet95]

здравствуйте такой вопрос, что надо использовать для написания вот такой штуки.
<img src='/1.jpg' style="left: 13;" id="img1">
<img src='/2.jpg' onmouseover="left()">


<script>
var img1 = document.getElementById("img1");
function left(){
/ что прописать тут?
}
</script>

чтобы при наведении на 2 картинку у первой картинки значение left: 13; плавно изменилось на left: 26; при этом отображаться это должно как будто картинка едет слева на право.

[Deff]

supernet95,
Самое простое, вторую картинку сделать гиф анимацией с однократным запуском (либо запустить аниме с помощью <marguee

[supernet95]

supernet95,
Самое простое, вторую картинку сделать гиф анимацией с однократным запуском (либо запустить аниме с помощью <marguee

gif картинка не подходит так как картинка должна будет двигаться несколько раз на определённые дистанции при определённых условиях, тег <marqee> отпадает так как объект не должен постоянно прокручиваться, а точнее дойдя до определённого числового значения остановится

[Deff]

так как объект не должен постоянно прокручиваться, а точнее дойдя до определённого числового значения остановится

у <marquee> есть метод this.stop() и this.start() , привязав его к onmouseover/onmouseout элемента и вставив внутрь картинку - получим искомое

[cyber]

а как насчет css3 анимации?
transition

[bes]

на js

<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">

<script>
window.onload = function () {
  var img = document.getElementsByTagName('img');
  var int;
  img[1].style.position = 'absolute';
  img[1].style.left = 100 + 'px';

  function goRight() {
    if (parseInt(img[1].style.left) < 120) {
      img[1].style.left = parseInt(img[1].style.left) + 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  function goLeft() {
    if (parseInt(img[1].style.left) > 100) {
      img[1].style.left = parseInt(img[1].style.left) - 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  img[0].onmouseover = function () {
    clearInterval(int);
    int = setInterval (goRight, 30);
  }

  img[0].onmouseout = function () {
    clearInterval(int);
    int = setInterval (goLeft, 30);
  }

}

</script>

[supernet95]

а как насчет css3 анимации?
transition

Да, получилось, большое спасибо.

[supernet95]

<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">

<script>
window.onload = function () {
  var img = document.getElementsByTagName('img');
  var int;
  img[1].style.position = 'absolute';
  img[1].style.left = 100 + 'px';

  function goRight() {
    if (parseInt(img[1].style.left) < 120) {
      img[1].style.left = parseInt(img[1].style.left) + 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  function goLeft() {
    if (parseInt(img[1].style.left) > 100) {
      img[1].style.left = parseInt(img[1].style.left) - 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  img[0].onmouseover = function () {
    int = setInterval (goRight, 30);
  }

  img[0].onmouseout = function () {
    int = setInterval (goLeft, 30);
  }

}

</script>

ваш вариант мне тоже понравился, но он маленько будет посложней, огромное спасибо за написание кода, для наглядного примера.

[cyber]

<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">

<script>
window.onload = function () {
  var img = document.getElementsByTagName('img');
  var int;
  img[1].style.position = 'absolute';
  img[1].style.left = 100 + 'px';

  function goRight() {
    if (parseInt(img[1].style.left) < 120) {
      img[1].style.left = parseInt(img[1].style.left) + 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  function goLeft() {
    if (parseInt(img[1].style.left) > 100) {
      img[1].style.left = parseInt(img[1].style.left) - 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  img[0].onmouseover = function () {
    int = setInterval (goRight, 30);
  }

  img[0].onmouseout = function () {
    int = setInterval (goLeft, 30);
  }

}

</script>

если несколько раз быстро навести мышь(и убрать) на картинку запуска анимации , анимация виснет и больше не двигается

[bes]

если несколько раз быстро навести мышь(и убрать) на картинку запуска анимации , анимация виснет и больше не двигается

Подправил