jquery animate 및 step function usage

jquery 도움말 및 jQuery 애니메이션으로 내 div를 fadeout하려했지만 논리가 작동하지 않습니다. fadeout div에 애니메이션 기능이 내 div 높이를 줄이려고 할 때 & 너비가 50 %입니다. 내가 div의 높이 & 너비가 거의 절반이 될 때 나는 아주 원활하게 페이드 아웃 div 싶어요.jquery animate 및 step function usage

내 코드가 작동하지만 효과를 원하지 않습니다. 가능한 경우 내 코드를보고 수정하십시오. 여기에 구현을 볼 수있는 URL이 있습니다. http://jsfiddle.net/Sj4eG/12/

그냥이 아래 부분을 this 같은

grower.animate({width:0, height:0, left:(windowWidth/2 - $('#grower').width()), top:(windowHeight/2 - $('#grower').height())}, 
{ 
duration: 1000, 
step: function(now, fx) { 
       alert(now); 
    if (fx.prop == "height") { 
     var threshold = fx.start/2; 

     if (now < 150) { 
      $(fx.elem).css("opacity", now/threshold); 
     } 
    } 
} 
});

출처

2012-01-20 Thomas

나는 코드에 대해 당신이 원하는 것을 실제로 이해하지 못합니까? 이미있는 방식과 다른 점은 무엇입니까? – JackalopeZero

그냥 URL로 이동하여 효과를 확인하십시오. 그것의 높이가 아주 작아지면 div는 페이드 아웃되고있는 것을 볼 수 있습니다. 하지만 높이가 150 픽셀이되면 div가 페이드 아웃해야합니다. – Thomas

당신은 다른 접근 방법을 시도 할 수 있습니다. 이렇게하면 움직이는 각 속성마다 다른 여유를 가질 수 있습니다.
이제는 애니메이션이 진행률의 50 %에 도달 할 때까지 애니메이션이 적용되지 않는 여유 함수를 정의하면됩니다. (완화 기능을 이해하는 나에게 도움이 here's the resource)
이 아주 쉽게 수행 할 수 있습니다

$.easing['my_easing_name'] = function(p){ 
    return p < 0.5 
       ? 0 
       : 2 * (p-0.5); 
};

그런 다음 당신은 그것을 좋아 사용할 수 있습니다 여기에

$('element').animate({ 
     prop1 : value1, 
     prop2 : value2 
    },{ 
     duration : 1000, 
     specialEasing : { 
      prop1 : 'liniar', 
      prop2 : 'my_easing_name' 
     } 
});

내 버전의 데모입니다 : http://jsfiddle.net/gion_13/Sj4eG/32/

출처

2012-01-20 15:33:03

u 좋은 지적하지만 ur url http://jsfiddle.net/gion_13/Sj4eG/32/로 이동하지만 높이 및 너비가 50 % 감소 할 때 div가 fadeout을 얻지 못하는 것을 보았습니다. 그래서 기능을 완화하는 방법을 보여주기 위해 ur 코드를 수정하십시오. 감사 – Thomas

뭔가를 수정해야?

죄송합니다. 애니메이션 때 specialEasing 속성을 사용할 수 있습니다, 대신 step 기능을 사용하고 opacity를 다시 계산 :

출처

2012-01-20 13:43:07 JackalopeZero

나는 내 요구 사항을 이해하지 못했 으면 좋겠다. – Thomas

센터 중심으로 만드는 방법은 무엇입니까? – Thomas

jquery animate 및 step function usage

답변

관련 문제