Как анимировать элементы с помощью jQuery? - PullRequest
Новая
       21

Как анимировать элементы с помощью jQuery?

1 голос
/ 20 декабря 2009

Как мне сказать, сдвинуть элемент на несколько пикселей в сторону от его исходного положения с помощью jQuery? Я знаю, что есть функция animate (), но я не знаю, как ее использовать. Советы, учебники будут оценены.

EDIT:

Я сейчас пытаюсь изменить цвет фона элемента при наведении курсора (я бы тоже хотел поменять местами фоновые изображения, но это не сейчас ...)

В настоящее время я использую следующий код. в чем дело? (.link - это класс, ссылающийся на группу элементов) 

  //light up links on  mouseover
  $(".link").mouseover(function(event){           
    $(this).animate({'color' : '#000099'}, "fast");
  });

  //dim link on mouseout
  $(".link").mouseout(function(event){       
    $(this).animate({'color' : '#efefef'}, "fast");                
  });

Ответы [ 4 ]

3 голосов
/ 20 декабря 2009

Сначала прочитайте документацию для animate.

Затем необходимо определить элемент, который вы пытаетесь переместить, чтобы его атрибут position был установлен на relative или absolute через CSS или jQuery.

Если вы установите его на relative, вы можете просто указать количество пикселей, на которое хотите его переместить: 

// Will move #element right 10 pixels in 500 milliseconds
$('#element').animate({
    left: 10px
}, 500);

Если вы выбрали абсолютное позиционирование, вы должны сначала определить начальную позицию элемента, используя .offset().left и добавить к ней желаемое количество пикселей, а затем анимировать к этой позиции. Например: 

// Will move #element right 10 pixels in 500 milliseconds
$('#element').animate({
    left: $('#element').offset().left + 10
}, 500);

Это работает, если родительские элементы элемента # расположены статически (в противном случае смещение (). Left не совпадает с абсолютным левым значением).

1 голос
/ 21 декабря 2009

Для цветной анимации вам необходимо использовать плагин jQuery color .

Вы можете использовать animate() для анимации цветов при импорте плагина jQuery Color.

0 голосов
/ 20 декабря 2009

Мне очень нравится этот сайт, это отличный ресурс о jQuery

JQuery для дизайнеров

0 голосов
/ 20 декабря 2009

Когда вы думаете о позиционной анимации, вам нужно помнить, что вы все еще просто играете с CSS. Так что в вашем случае, когда вы хотите немного сдвинуть влево, вы захотите отрегулировать левое поле (или, возможно, добавить отступ справа, в зависимости от существующих стилей и макета).

Например: 

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

Этот сайт содержит полезный контент по базовой анимации и, конечно, есть актуальная документация jQuery .

...