Используя jQuery.animate для анимации div справа налево?

У меня есть div, абсолютно позиционированный в top: 0px и right: 0px, и я хотел бы использовать jquery .animate(), чтобы анимировать его с текущей позиции до left: 0px. Как это сделать? Кажется, я не могу заставить это работать:

$("#coolDiv").animate({"left":"0px"}, "slow");

Почему эта работа не работает и как она выполняет то, что я ищу?

Спасибо!!

Ответы

Ответ 1

Я думаю, что причина, по которой он не работает, имеет какое-то отношение к тому факту, что у вас есть позиция позиции right, но не left.

Если вы вручную установили left в текущую позицию, оно выглядит следующим образом:

Пример в реальном времени: http://jsfiddle.net/XqqtN/

var left = $('#coolDiv').offset().left;  // Get the calculated left position

$("#coolDiv").css({left:left})  // Set the left to its calculated position
             .animate({"left":"0px"}, "slow");

EDIT:

Появляется, как будто Firefox ведет себя так, как ожидалось, потому что его вычисленная позиция left доступна как правильное значение в пикселях, тогда как браузеры на основе Webkit и, по-видимому, IE, возвращают значение auto для левой позиции.

Поскольку auto не является исходной позицией для анимации, анимация эффективно работает от 0 до 0. Не очень интересно смотреть.: О)

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

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

$("#coolDiv").css('left', function(){ return $(this).offset().left; })
             .animate({"left":"0px"}, "slow");

Ответ 2

Это сработало для меня

$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");

Ответ 3

Вот минимальный ответ, показывающий ваш пример работы:

<html>
<head>
<title>hello.world.animate()</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
    type="text/javascript"></script>
<style type="text/css">
#coolDiv {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    background-color: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    // this way works fine for Firefox, but 
    // Chrome and Safari can't do it.
    $("#coolDiv").animate({'left':0}, "slow");
    // So basically if you *start* with a right position
    // then stick to animating to another right position
    // to do that, get the window width minus the width of your div:
$("#coolDiv").animate({'right':($('body').innerWidth()-$('#coolDiv').width())}, 'slow');
    // sorry that so ugly!
});
</script>
</head>
<body>
    <div style="" id="coolDiv">HELLO</div>
</body>
</html>

Исходный ответ:

У вас есть:

$("#coolDiv").animate({"left":"0px", "slow");

Исправлено:

$("#coolDiv").animate({"left":"0px"}, "slow");

Документация: http://api.jquery.com/animate/

Ответ 4

поэтому метод .animate работает только в том случае, если вы присвоили атрибут позиции элементу, если он не перемещается?

Например, я видел, что если я объявляю div, но я ничего не объявляю в css, он не принимает его позицию по умолчанию и не перемещает его на страницу, даже если я объявляю свойство margin: xwyz;

Ответ 5

Если вы знаете ширину дочернего элемента, который вы анимируете, вы можете использовать и анимировать смещение маржи. Например, это будет анимировать слева: 0 вправо: 0

CSS

.parent{
width:100%;
position:relative;
}

#itemToMove{
position:absolute;
width:150px;
right:100%;
margin-right:-150px;
}

JavaScript:

$( "#itemToMove" ).animate({
"margin-right": "0",
"right": "0"
}, 1000 );