сдвиньте изображение влево или вправо

Question

Как вы перемещаете изображение влево / вправо, используя JavaScript?Я хочу, чтобы изображение медленно скользило вправо.Используете ли вы функцию setTimeout в javascript для постепенного изменения «левого» значения стиля элемента?Может быть, jQuery имеет функцию для этого?

Answer 1

В jQuery есть встроенный метод animate.

Пример использования:

$('#id').animate({
    left: 200
});

Подробнее: http://api.jquery.com/animate/

Answer 2

jQuery точно делает:)

Есть встроенная функция .animate (): http://api.jquery.com/animate/

Пример кода (слегка измененный по сравнению с jQuery) приведен ниже, и я создал рабочий jsFiddle: http://jsfiddle.net/Damien_at_SF/HRBkN/

CSS:

img.block {
  position:absolute;
  left:50px;
  top:50px;
  margin:5px;
}

HTML:

<button id="left">left</button> <button id="right">right</button>
<img src="http://jsfiddle.net/img/logo.png" class="block" />

JS для абсолютного позиционирования img:

$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

JS для относительного / статического положения img:

$("#right").click(function(){
  $(".block").animate({"margin-left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"margin-left": "-=50px"}, "slow");
});

Надеюсь, это поможет:)

Answer 3

Я могу сдвинуть изображение влево и вправо с помощью следующего:

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");

    if (n > x.length) 
    {
        slideIndex = 1
    }

    if (n < 1) 
    {
        slideIndex = x.length
    }

    for (i = 0; i < x.length; i++) 
    {
        x[i].style.display = "none";  
    }

    x[slideIndex-1].style.display = "block";  
}

Answer 4

Для чего это стоит, у меня есть скрипка , которая делает это без .animate().Я не использовал .animate(), но я прочитаю это после прочтения этого поста.