외부 함수가있는 콜백 함수

Question

내 플러그인에서 애니메이션을 외부에서 처리하고 일부 이벤트에서만 해고됩니다.

예 :

내가 옵션이 참인지 거짓인지 확인하고 애니메이션을 적용해야

var animateToLeft = function() { 
    $elements.animate({ 
     marginLeft: '+=' + 300, 
     marginRight: '-=' + 300 
    }); 
}, 
    animateToRight = function() { 
     $elements.animate({ 
      marginLeft: '-=' + 300, 
      marginRight: '+=' + 300 
     }); 
    }; 

나중에 내 플러그인에서 :

if(true === options) { 
    $button.click(animateToRight); 
} else { 
    $button.click(animateToLeft); 
} 

는 지금까지 코드가 잘 작동합니다. 하지만 나는 내가 경우-else 문 동안 추가해야 애니메이션을 직접에 콜백 기능을 추가 할 수없는 경우-else 문

var callback1 = function() { 
    //do something 
}, 
    callback2 = function() { 
    //do something else 
    } 

에 따라 두 개 더 콜백 함수를 추가해야합니다. 이 방법을 시도했지만 작동하지 않았습니다.

if(true === options) { 
    $button.click(animateToRight, function() { 
     $body.bind(callback1); 
    }); 
} else { 
    $button.click(animateToLeft, function() { 
     $body.bind(callback2); 
    }); 
} 

어떻게 콜백을 추가 할 수 있습니까? 어쩌면 더 간단한 방법이 있을까요?

Answer 1

애니메이션이 완료되면 호출되는 애니메이션 기능에 콜백을 전달할 수 있습니다.

// Allow animate functions to be passed a callback 
var animateToLeft = function (callback) 
{ 
    $elements.animate({ 
     marginLeft: '+=' + 300, 
     marginRight: '-=' + 300 
    }, callback); 
}, 
animateToRight = function (callback) 
{ 
    $elements.animate({ 
     marginLeft: '-=' + 300, 
     marginRight: '+=' + 300 
    }, callback); 
}; 

var callback1 = function(){}; 
var callback2 = function(){}; 

if(true === options) 
{ 
    $button.on('click', function() 
    { 
     // when button is clicked call animate with the callback. 
     animateToRight(callback1) 
    }); 
} 
else 
{ 
    $button.on('click', function() 
    { 
     animateToRight(callback2) 
    }); 
} 

DEMO