Mootools 1.2 튜토리얼: 동시에 여러 변형 애니메이션 수행_Mootools

var startFXElement = function() {
this.start({
'0': {
'높이': [50, 200],
'너비': 50,
'배경색': '# 87AEE1'
},
'1': {
'너비': [100, 200],
'테두리': '5px 점선 #333'
}
}) ;
}
var startFXElementB = function(){
this.start({
'0': {
'너비': 500,
'배경색': ' #333'
},
'1': {
'너비': 500,
'테두리': '10px solid #DC1E6D'
}
}); >}
var setFXElement = function(){
this.set({
'0': {
'높이': 50,
'배경색': '#FFFFCC' ,
'너비': 100
},
'1': {
'높이': 50,
'너비': 100,
'테두리': '없음'
}
})
}
window.addEvent('domready', function() {
var fxElementsArray = $$('.myElementClass');
var startInd = $(' start_ind');
var cancelInd = $('cancel_ind');
var CompleteInd = $('complete_ind')
var chainCompleteInd = $('chain_complete_ind'); fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx 옵션
링크: '체인',
기간: 1000,
전환: 'sine:in:out',
/ /Fx 이벤트
onStart: function(){
startInd.highlight('#C3E608')
},
onCancel: function(){
cancelInd.highlight('#C3E608' );
},
onComplete: function(){
completeInd.highlight('#C3E608')
},
onChainComplete: function(){
chainCompleteInd.highlight( '#C3E608');
}
});
$('fxstart').addEvent('click', startFXElement.bind(fxElementsObject))
$('fxstartB'). addEvent(' 클릭', startFXElementB.bind(fxElementsObject))
$('fxset').addEvent('click', setFXElement.bind(fxElementsObject))
$('fxpause').addEvent( '클릭' , function(){
fxElementsObject.pause();
})
$('fxresume').addEvent('click', function(){
fxElementsObject.resume( );
});
});
자세히 알아보기