<div></div><br />
<button>300 width</button>
<button>100 width</button>
<button>Fade Out</button>
<button>Fade to 50% opacity</button>
<button>Fade In</button>
参考代码:
复制代码 代码如下:
#tweener {
height: 100px
width: 100px
background-color: #3399CC
}
把鼠标移上去可以看到第一种类型的醒目效果。
300 width
100 width
Fade Out
Fade to 50% opacity
Fade In
更多渐变(Tween)
创建一个新的渐变
如果你想更灵活多变和更多地控制你的变化效果,你可能想创建一个新的形变动画来替代那些快捷方式。注意使用“new”来创建一个新的Fx.Tween的实例:
参考代码:
复制代码 代码如下:
window.addEvent('domready', function() {
// 首先我们把要变化的元素赋值给一个变量
var newTweenElement = $('newTween');
// 现在我们创建一个动画事件,然后把这个元素作为参数传入
var newTween = new Fx.Tween(newTweenElement);
});
参考代码:
复制代码 代码如下:
<!-- 这个是我们要应用渐变效果的元素 -->
<div></div>
<!-- 这个是启动渐变效果的按钮 -->
<button>Set</div>
通过渐变设置样式
一旦你从一个元素创建了一个新的渐变,你可以轻松地通过.set()方法设置一个样式属性。这个和.setStyle()方法一样。
参考代码:
复制代码 代码如下:
var newTweenSet = function() {
// 注意"this"的使用
// 学习如何使用"this"
this.set('width', '300px');
}
就像我们以前学习的,我们想要把我们的函数从domready事件中独立出来,但是在这个例子中,我们想要在domready事件中创建一个渐变,然后在外部引用它。我们已经掌握了一种在domready之外传递参数的方法(通过创建一个匿名函数并传递一个参数),今天我们要学习一种Moo化的更好的方式来传递渐变对象(这并不是说匿名函数在任何时候都不再合适)。
.bind();
通过.bind();,我们可以让一个函数里面的“this”等同于参数:
参考代码:
复制代码 代码如下:
// 首先我们给上面我们看到的那个按钮添加一个点击事件
// 然后,不只是仅仅调用这个函数
// 我们调用这个函数并且添加".bind()"
// 然后我们替换掉任何我们要传递给函数的
// 现在,在这个"newTweenSet"函数内部,"this"将指向"newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
因此,现在我们再看看上面的这个函数,“this”现在就等同于“newTween”了(就是我们的tween对象)。
现在我们把这些东西放在一起看看:
参考代码:
复制代码 代码如下:
// 这里是我们的函数
var newTweenSet = function() {
// 由于我们使用了bind,现在"this"就指向了"newTween"
// 因此,这里的相当于是:
// newTween.set('width', '300px')
this.set('width', '300px');
}
window.addEvent('domready', function() {
// 首先把我们的元素赋值给一个变量
var newTweenElement = $('newTween');
// 然后我们new一个FX.Tween,然后赋值给一个变量
var newTween = new Fx.Tween(newTweenElement);
// 现在添加我们的事件,并绑定newTween和newTweenSet
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
});
启动一个渐变效果
现在,我们已经设置好了我们所有的渐变对象,我们的函数在domready事件之外,我们也学习了如何通过.set();方法设置一个样式表属性,我们来看看实际的渐变。启动一个渐变非常简单,和.fade();非常类似,总共有两种方式来使用.start();方法:
让一个属性值从当前值变化到另外一个值
先设置一个属性值,然后变化到另外一个值
参考代码:
复制代码 代码如下: