анимация с помощью .animate () jquery

Question

У меня есть логотип / заголовок в css

#logo2 {padding:43px 20px 0 20px; background:url(images/in_Store_Marketing.jpg) top right no-repeat;}

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

В настоящее время jquery выглядит так

$(document).ready(function(){
     $('#logo2').animate(
     { right: "+=95%" }, 3000 );
});

HTML выглядит так

<div id="logo2" style="height:70px">

в данный момент ничего не происходит, нет анимации ... что мне не хватает? Как бы вы заставили эту анимацию работать таким образом?

Answer 1

Свойство "position" элемента должно иметь значение, отличное от "static", чтобы свойства размещения, такие как "top" или "left", имели какой-либо эффект (обратите внимание, что по умолчанию для позиции используется значение "static", если не указано иное - что вызывая проблемы ОП). Итак: абсолютный, относительный и, возможно, фиксированный (не положительный на этом). Также - jquery определенно будет анимировать "background-position", но только один параметр, а не два ("-30px", а не "-30px 10px"). В jQ 1.4 вы могли анимировать обе части, но это было «исправлено» в 1.5. Вроде печально.

Answer 2

Вы анимируете "left", но вам действительно нужно анимировать "background-position". Однако, поскольку это не одно из базовых свойств, которые jQuery может напрямую анимировать, может потребоваться также загрузить jQueryUI, и даже он может не иметь возможности анимировать "background-position" (проблема в том, что это странные два имущество).

Answer 3

я думаю, что левые должны быть в кавычках:

$(".logo").animate({"left": "+=400px"}, 3000);

Кроме того, animate () редактирует позицию, и у вас нет заданной позиции, и, насколько я знаю, она перемещает только элементы, а не объекты внутри элементов.

если вы посмотрите на эту скрипку, я немного изменил ваш CSS, чтобы добавить позиционирование, и обернул «логотип» в div, к которому применяется анимация.

надеюсь, это поможет. http://jsfiddle.net/aMaaC/1/

Answer 4

попробуйте это?

.logo {padding: 35px 15 px 0 15 px; background:url(images/Logo.jpg) top right no-repeat;}

Обратите внимание, что я изменил влево на вправо

и измените JS на:

$(document).ready(function(){ $('#alex').animate({ right: "+=95%" }, 3000); });

Я написал подобный пример для вас в jsfiddle, посмотрите его

UPDATE:

Попробуйте мое обновление, оно использует абсолютно позиционированное изображение, которое даст тот же эффект, что и фоновое изображение:

http://jsfiddle.net/tub3c/