Когда вы делаете анимацию со значением по умолчанию: $(this).animate({height: "60"})
Это превращается в swing анимацию, подобную этой: $(this).animate({height: "60"}, 500, "swing")
Теперь опции замедление , которыепо умолчанию доступны swing и linear.Звучит так, будто вам нужен новый файл с именем stepped.
Глядя на исходный код jQuery ... вот как он добавляет методы замедления для начала ...
jQuery.fn.extend({
//other stuff
easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}
//other stuff
});
Просматривая в Интернете, вы можете увидеть анимацию с помощью команды
alert($.easing.linear)
Теперь я действительно не знаю об этом fn.extend материале, потому что он даже не работал, когда я пытался это ... но в любом случае япопробовал это, и это сработало.(делает то же самое, что и линейный)
$.easing.test = function(p, n, firstNum, diff) {
return firstNum + diff * p;
}
$('div').animate({
height: 200
}, 2000, 'test')
Попробуйте здесь http://jsfiddle.net/UFq7c/1/
Кажется, что параметры
p Процент завершения n Количество пройденных миллисекунд firstNum Начальная точка diff Как далеко идти
Линейное было легкоВычислять.Начальная точка плюс Сколько времени идти до конца Процент завершения
Мы можем легко сказать, что нужно двигаться десять процентов за раз вместо десятой доли за раз с помощью
$.easing.test = function(p, n, firstNum, diff) {
return firstNum + diff * (parseInt(p / .10) * .10); // .10 is 10%, .15 is 15%, etc
}
Попробуйтездесь http://jsfiddle.net/UFq7c/2/
Теперь единственная задача - превратить это в количество пикселей.Можно подумать, что firstNum будет равно нулю, а diff будет равно 200 .. но nooo .. firstNum, кажется, всегда равно нулю процентов, а diff всегда равно 100% (сто процентовэто номер один).
хмм.Кажется глупым0% плюс 100% раз Процент завершен ... да ладно
Похоже, вам придется анимировать только определенное количество за раз.Вы можете легко анимировать десять пикселей за раз с помощью приведенного выше примера, просто используя этот
$('div').animate({height: '+=100'}, 2000, 'test').animate({height: '+=100'}, 2000, 'test')
, который анимирует 100 пикселей дважды, 10% за раз (10% из 100 пикселей составляет 10 пикселей за один раз).
Возможно, вы захотите изменить 10% на 100%, а затем анимировать 10 пикселей за один раз, как это
$.easing.test = function(p, n, firstNum, diff) {
return firstNum + diff * (parseInt(p / 1.00) * 1.00); // 1.00 is 100%, 1.50 is 150%, etc
}
for(var i = 0; i < 20; i++) {// Do this code 20 times
$('div').animate({height: '+=10'}, 250, 'test')
}
Это зависит от того, как работает ваш код.Правило 100% кажется глупым, но оно работает.
Если вы используете правило 100%, то вы можете захотеть сделать его короче, как показано ниже, что даст тот же результат
$.easing.test = function(p, n, firstNum, diff) {
if(p == 1)
return firstNum + diff
else
return firstNum
}
Теперь я будуподождите, пока за мой ответ проголосуют, потому что я не использую скобки в своих операторах if или точку с запятой в конце моих команд.
Cheers!