我有一个jQuery动画,它在最后使用默认的挥杆放松来减慢速度。我尝试了线性选项,但在接近尾声时看起来同样缓慢。我浏览并尝试了这里的几个缓和函数。因为我有其他几个动画在延迟的情况下运行以同步它们,所以似乎任何与最初的摇摆放松变化太大的放松功能都会使所有东西都不同步。经过一番搜索,我找到了一个easeOutInQuad函数,它的图看起来像摆动函数的倒数。我认为与摆动函数相反(或接近相反)的放松函数不太可能改变运行动画的总时间。这是我在代码中的easeOutInQuad和相关的easeOutQuad和easeInQuad函数:
$(function(){$.extend($.easing,{
easeOutQuad:function(e,f,a,h,g){
return -h*(f/=g)*(f-2)+a;
},
easeInQuad:function(e,f,a,h,g){
return h*(f/=g)*f+a;
},
easeOutInQuad:function(e,f,a,h,g){
if(f<g/2){
return easeOutQuad(f*2,a,h/2,g);
}return easeInQuad((f*2)-g,a+h/2,h/2,g);
}
});});
由于某种原因,当我运行动画时,我得到了一个easeOutQuad是未定义的错误。我对jQuery有些陌生。感谢您的帮助。
这里是我正在使用的代码的其余部分,供参考:
$(document).ready(function() {
var fC_duration = 10000;
//flyingCrow synchronization *No Edit*
var rW_delay = 0.021*fC_duration;
var uFin_delay = 0.183*fC_duration;
var uFout_delay = 0.025*fC_duration;
var mF_delay = 0.225*fC_duration;
var dF_delay = 0.242*fC_duration;
//bruce2 and and hand FadeOut synchronization *No Edit*
var b2_delay = 0.133*fC_duration;
//synchronize cardGrab with flyingCrow *No Edit*
var fCgC_sync = 0.417*fC_duration;
// Syncs completion of bruce animations with start of flyingCrow
var bFc_sync = fC_duration+3000;
$(function(){$.extend($.easing,{
easeOutQuad:function(e,f,a,h,g){
return -h*(f/=g)*(f-2)+a;
},
easeInQuad:function(e,f,a,h,g){
return h*(f/=g)*f+a;
},
easeOutInQuad:function(e,f,a,h,g){
if(f<g/2){
return easeOutQuad(f*2,a,h/2,g);
}return easeInQuad((f*2)-g,a+h/2,h/2,g);
}
});});
// lock scroll position, but retain settings for later
function lockScroll(){
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
}
function unlockScroll(){
// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1]);
}
lockScroll();
$(".bruce").fadeTo(3000, 1, function() {
$(".question").animate({"opacity": 1}, "fast");
$(".question").delay(4500).animate({"opacity": 0}, "fast", function() {
$(".bruce").fadeTo(2500, 0);
$(".bruce2").delay(1700).fadeTo(50, 1);
$(".shake").delay(1700).fadeTo(50, 1, function() {
$(".solution").delay(1600).animate({"opacity": 1}, "fast");
});
});
});
setTimeout(function() {
$(".crowTree").delay(250).animate({"opacity": 0}, 200);
$(".flyingCrow").delay(350).animate({
width: "1215px",
height: "860px",
marginLeft: "-130%",
marginTop: "300px"},
{
duration: fC_duration,
queue: false,
easing:'easeOutInQuad'
});
$(".raiseWings").animate({"opacity": 1}, "fast", function () {
$(".raiseWings").delay(rW_delay).animate({"opacity": 0}, "fast");
});
$(".upFlap").delay(uFout_delay).animate({"opacity": 1}, "fast", function() {
$(".upFlap").delay(uFin_delay).animate({"opacity": 0}, "fast");
});
$(".midFlap").delay(mF_delay).animate({"opacity": 1}, "fast", function() {
$(".midFlap").animate({"opacity": 0}, "fast");
});
$(".downFlap").delay(dF_delay).animate({"opacity": 1}, "fast", function() {
$(".downFlap").animate({"opacity": 0}, 1, function() {
$(".midFlap").animate({"opacity": 1}, 1, function() {
$(".midFlap").delay(100).animate({"opacity": 0}, 1, function() {
$(".upFlap").animate({"opacity": 1}, 1, function() {
$(".solution").animate({"opacity": 0}, "fast");
});
});
});
});
});
setTimeout(function() {
$(".upFlap").animate({"opacity": 0}, 1, function() {
$(".grabCard").animate({"opacity": 1}, 1, function() {
$(".grabbedCard").animate({"opacity": 0}, 1, function() {
$(".hand, .bruce2").fadeTo(b2_delay, 0);
});
});
});
},fCgC_sync);
setTimeout(function() {
unlockScroll();
$('html, body').animate({scrollTop:$(document).height()}, 2000);
},fC_duration);
},bFc_sync);
});
您的代码。。。
if(f<g/2){
return easeOutQuad(f*2,a,h/2,g);
}return easeInQuad((f*2)-g,a+h/2,h/2,g)
easeOutQuad()
不能这样调用。