기본 스윙 완화를 사용하여 끝에 너무 많이 감속하는 jQuery 애니메이션이 있습니다. 선형 옵션을 시도했지만 비슷하게 느려 보였습니다. 나는 여러 가지 완화 기능을 시험해보고 시도했다. here. 필자는 동기화를 위해 지연된 여러 애니메이션을 가지고 있기 때문에 원래의 스윙 완화에서 너무 많이 달라지는 이징 함수가 모든 것을 빠져 나가는 것처럼 보입니다. 몇 가지 검색을 한 후에 swingOutInQuad 함수가 스윙 함수의 역함과 같이 보이는 그래프를 발견했습니다. 스윙 함수의 역 (또는 역함수) 인 이완 함수가 애니메이션을 실행하는 총 시간을 변경하지 않을 것이라고 생각했습니다.easeOutInQuad 오류를 반환합니다 "easeOutQuad"가 정의되지 않았습니다
어떤 이유 $(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가 정의되지 않은 오류가 얻을 : 내 코드에 가지고 여기에 easeOutInQuad와 종속 easeOutQuad 및 easeInQuad 기능입니다. 나는 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);
});
제이크의 답변에서 내가 여기에 표시된 것과 같은 형식으로 생각합니다. [link] http://stackoverflow.com/questions/5207301/looking-for-jquery-easing-functions-without-using-a-plugin. 더 설명해 주시겠습니까? –