Mootools 1.2教程 滑动效果（Slide）

<div id="slide_element" class="slide">这里是要滑动显示的内容。</div>

.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}

var slideElement = $('slide_element');
var slideVar = new Fx.Slide(slideElement, {
// Fx.Slide选项
mode: 'vertical', // 默认是'vertical'（垂直）
// Fx选项
transition: 'sine:in',
duration: 300,
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
}
});

slideVar.slideIn('horizontal');

slideElement.set('slide');

slideElement.set('slide', {duration: 1250});

slideElement.slide('in');

<div id="start" class="ind">Start</div>
<div id="cancel" class="ind">Cancel</div>
<div id="complete" class="ind">Complete</div>
<br /><br />
<button id="openA">open A</button>
<button id="closeA">close A</button>
<div id="slideA" class="slide">Here is some content - A. Notice the delay before onComplete fires. This is due to the transition effect, the onComplete will not fire until the slide element stops "elasticing." Also, notice that if you click back and forth, it will "cancel" the previous call and give the new one priority.</div>
<button id="openB">open B</button>
<button id="closeB">close B</button>
<div id="slideB" class="slide">Here is some content - B. Notice how if you click me multiple times quickly I "chain" the events. This slide is set up with the option "link: 'chain'"</div>
<button id="openC">toggle C</button>
<div id="slideC" class="slide">Here is some content - C</div>
<button id="openD">toggle D</button>
<div id="slideD" class="slide">Here is some content - D. Notice how I am not hooked into any events. This was done with the .slide shortcut.</div>
<button id="openE">toggle E</button>
<div id="slide_wrap">
<div id="slideE" class="slide">Here is some content - E</div>
</div>

.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}
#slide_wrap {
padding: 30px;
background-color: #D47000;
}

window.addEvent('domready', function() {
// 示例A
var slideElement = $('slideA');
var slideVar = new Fx.Slide(slideElement, {
// Fx.Slide选项
mode: 'horizontal', // 默认是'vertical'
//wrapper: this.element, // 默认是this.element
// Fx选项
link: 'cancel',
transition: 'elastic:out',
duration: 'long',
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
}).hide().show().hide(); // 注意，.hide和.show方法并不触发事件
$('openA').addEvent('click', function(){
slideVar.slideIn();
});
$('closeA').addEvent('click', function(){
slideVar.slideOut();
});
// 示例B
var slideElementB = $('slideB');
var slideVarB = new Fx.Slide(slideElementB, {
// Fx.Slide选项
mode: 'vertical', // 默认是'vertical'
// Fx选项
// 注意：链式效果可以让你多次点击，
// 当鼠标离开后，
// 每次点击的动画可以依次触发
link: 'chain',
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
});
$('openB').addEvent('click', function(){
slideVarB.slideIn();
});
$('closeB').addEvent('click', function(){
slideVarB.slideOut();
});
// 示例 C
var slideElementC = $('slideC');
var slideVarC = new Fx.Slide(slideElementC, {
// Fx.Slide选项
mode: 'vertical', // 默认是'vertical'
//wrapper: this.element, // 默认是this.element
// Fx选项
//link: 'cancel',
transition: 'sine:in',
duration: 300,
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
}).hide();
$('openC').addEvent('click', function(){
slideVarC.toggle();
});
$('slideD').slide('hide');
$('openD').addEvent('click', function(){
$('slideD').slide('toggle');
});
// 示例C
var slideElementE = $('slideE');
var slideWrap = $('slide_wrap');
var slideVarE = new Fx.Slide(slideElementE, {
// Fx.Slide选项
//mode: 'vertical', // 默认是'vertical'
wrapper: slideWrap // 默认是this.element
}).hide();
$('openE').addEvent('click', function(){
slideVarE.toggle();
});
});