использование jQuery .animate для анимации отделения справа налево?
Мне расположили отделение абсолютно в top: 0px и right: 0px, и я хотел бы использовать jQuery .animate() для анимации его от, он - текущая позиция к left: 0px. Как каждый делает это? Я, может казаться, не заставляю это работать:
$("#coolDiv").animate({"left":"0px"}, "slow");
Почему это не работает и как каждый выполняет то, что я надеюсь делать?
Спасибо!!
2 ответа
Я думаю, причина, по которой это не работает, связана с тем, что у вас установлена правая позиция, но не левая.
Если вручную установить 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. Не очень интересно смотреть. :o)
Установка левой позиции вручную перед анимацией, как указано выше, устраняет проблему.
Если вам не нравится загромождать ландшафт переменными, вот хорошая версия того же самого, которая устраняет необходимость в переменной:
$("#coolDiv").css('left', function(){ return $(this).offset().left; })
.animate({"left":"0px"}, "slow");
Вот минимальный ответ, который показывает, что ваш пример работает:
<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's 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 /