Если я имею
<div id="curve" style="position:relative; height:100px; width:100px; />
Как я заставил бы его переместиться в кривую? Я погуглил и почти, может казаться, не нахожу другой пример, который вызвал бы две функции сразу. Это - вид кода, который я хотел бы, но не работаю:
$('#curve').click(function () {
$(this).animate(
{
top: 400,
left = $(this).left() + $(this).left()*$(this).left()
},
'slow',
function() { $(this).animate( { left: 600 }, 'fast' ); }
);
});
Даже если это не правильный код, я верю анимационный, только берет "места назначения" для чего-то для движения в, таким образом, динамическое место назначения не работало бы, я думаю. Что я ищу для создания этой работы?
Править:: я определенно возьму тот плагин, но я - также удивление, почему этот бит кода не работает, поскольку я ожидал бы это к.
Вот другая попытка с помощью для цикла и метода задержки
$('#curve').click(function () {
for (var i=0; i<400; i++ )
{
$(this).delay(1000);
$(this).css( { top: i, left: i*1.5 } );
}
});
Кроме него просто немедленно переходит к тому положению, никакой задержке или чему-либо. таким образом, если это запускалось в [0,0], как только я нажимаю его, это телепортирует к [400 600]. Почему задержка не работает?
Я думаю, что на этот раз вам нужно пересчитать анимированную кривую часть за частью в js, а затем сделать это, перемещая маленькие части (= вы, вероятно, могли бы найти плагин ИЛИ вам придется делать все вычисления самостоятельно)
Редактировать 2 : Ранее добавленная ссылка была перемещена => http://foxparker.wordpress.com/2009/09/22/bezier -кривые-и-дуги-в-jquery / . Спасибо, Зак.
Edit 1 : это меня заинтриговало, поэтому я провел небольшое исследование в Google - как я и думал: плагин готов к использованию здесь: http: //foxparker.wordpress.com / 2009/09/22 / bezier-curve-and-arcs-in-jquery /
Плагин jQuery.path - это то, что вам нужно:
Пример: анимация по дуге
var arc_params = {
center: [285,185],
radius: 100,
start: 30,
end: 200,
dir: -1
};
$("my_elem").animate({path : new $.path.arc(arc_params)});
Пример: анимация по синусоиде
var SineWave = function() {
this.css = function(p) {
var s = Math.sin(p*20);
var x = 500 - p * 300;
var y = s * 50 + 150;
var o = ((s+2)/4+0.1);
return {top: y + "px", left: x + "px", opacity: o};
}
};
$("my_elem").animate({path : new SineWave});
Используете ли вы jQuery 1.4?
$(this).animate({
left: [500, 'easeInSine'],
top: 500
});
Для работы вам потребуется плагин облегчения: http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
Например http://jsbin.com/ofiye3/2