这是一款效果非常酷的 jQuery超酷文本和图标动画菜单特效插件。
HTML结构
html结构使用无序列表，每一个列表项都包含一个a元素，a元素中有三个用于动画的元素。
<ul id="sti-menu" class="sti-menu">
<li data-hovercolor="#37c5e9">
<a href="#">
<h2 data-type="mText" class="sti-item">
Some text
</h2>
<h3 data-type="sText" class="sti-item">
Some more text
</h3>
<span data-type="icon" class="sti-icon sti-icon-care sti-item">
</span>
</a>
</li>
<li>...</li>
...
</ul>
data-hovercolor将被用来设置鼠标滑过时文本的颜色。同时我们也给标题元素和图标span一些data-type，以便在后面用jQuery来控制它们。
JAVASCRIPT
首先定义一些默认设置：
var settings = {
// configuration for the mouseenter event
animMouseenter : {
'mText' : {speed : 350, easing : 'easeOutExpo', delay : 140, dir : 1},
'sText' : {speed : 350, easing : 'easeOutExpo', delay : 0, dir : 1},
'icon' : {speed : 350, easing : 'easeOutExpo', delay : 280, dir : 1}
},
// configuration for the mouseleave event
animMouseleave : {
'mText' : {speed : 300, easing : 'easeInExpo', delay : 140, dir : 1},
'sText' : {speed : 300, easing : 'easeInExpo', delay : 280, dir : 1},
'icon' : {speed : 300, easing : 'easeInExpo', delay : 0, dir : 1}
},
// speed for the item bg color animation
boxAnimSpeed : 300,
// default text color (same defined in the css)
defaultTextColor : '#000',
// default bg color (same defined in the css)
defaultBgColor : '#fff'
};
我们的每一个元素都有速度、easing效果、延时和方向（1为向上0为向下）。
return this.each(function() {
// if options exist, lets merge them with our default settings
if ( options ) {
$.extend( settings, options );
}
var $el = $(this),
// the menu items
$menuItems = $el.children('li'),
// save max delay time for mouseleave anim parameters
maxdelay = Math.max( settings.animMouseleave['mText'].speed + settings.animMouseleave['mText'].delay ,
settings.animMouseleave['sText'].speed + settings.animMouseleave['sText'].delay ,
settings.animMouseleave['icon'].speed + settings.animMouseleave['icon'].delay
),
// timeout for the mouseenter event
// lets us move the mouse quickly over the items,
// without triggering the mouseenter event
t_mouseenter;
// save default top values for the moving elements:
// the elements that animate inside each menu item
$menuItems.find('.sti-item').each(function() {
var $el = $(this);
$el.data('deftop', $el.position().top);
});
// Events
...
});
接下来为菜单项定义鼠标进入事件：
$menuItems.bind('mouseenter', function(e) {
clearTimeout(t_mouseenter);
var $item = $(this),
$wrapper = $item.children('a'),
wrapper_h = $wrapper.height(),
// the elements that animate inside this menu item
$movingItems= $wrapper.find('.sti-item'),
// the color that the texts will have on hover
hovercolor = $item.data('hovercolor');
t_mouseenter = setTimeout(function() {
// indicates the item is on hover state
$item.addClass('sti-current');
$movingItems.each(function(i) {
var $item = $(this),
item_sti_type = $item.data('type'),
speed = settings.animMouseenter[item_sti_type].speed,
easing = settings.animMouseenter[item_sti_type].easing,
delay = settings.animMouseenter[item_sti_type].delay,
dir = settings.animMouseenter[item_sti_type].dir,
// if dir is 1 the item moves downwards
// if -1 then upwards
style = {'top' : -dir * wrapper_h + 'px'};
if( item_sti_type === 'icon' ) {
// this sets another bg image position for the icon
style.backgroundPosition = 'bottom left';
} else {
style.color = hovercolor;
}
// we hide the icon, move it up or down, and then show it
$item.hide().css(style).show();
clearTimeout($item.data('time_anim'));
$item.data('time_anim',
setTimeout(function() {
// now animate each item to its default tops
// each item will animate with a delay specified
// in the options
$item.stop(true)
.animate({top : $item.data('deftop') + 'px'}, speed, easing);
}, delay)
);
});
// animate the bg color of the item
$wrapper.stop(true).animate({
backgroundColor: settings.defaultTextColor
}, settings.boxAnimSpeed );
}, 100);
})
然后定义鼠标离开事件：
// mouseleave event for each menu item
.bind('mouseleave', function(e) {
clearTimeout(t_mouseenter);
var $item = $(this),
$wrapper = $item.children('a'),
wrapper_h = $wrapper.height(),
$movingItems= $wrapper.find('.sti-item');
if(!$item.hasClass('sti-current'))
return false;
$item.removeClass('sti-current');
$movingItems.each(function(i) {
var $item = $(this),
item_sti_type = $item.data('type'),
speed = settings.animMouseleave[item_sti_type].speed,
easing = settings.animMouseleave[item_sti_type].easing,
delay = settings.animMouseleave[item_sti_type].delay,
dir = settings.animMouseleave[item_sti_type].dir;
clearTimeout($item.data('time_anim'));
setTimeout(function() {
$item.stop(true).animate({'top' : -dir * wrapper_h + 'px'}, speed, easing, function() {
if( delay + speed === maxdelay ) {
$wrapper.stop(true).animate({
backgroundColor: settings.defaultBgColor
}, settings.boxAnimSpeed );
$movingItems.each(function(i) {
var $el = $(this),
style = {'top' : $el.data('deftop') + 'px'};
if( $el.data('type') === 'icon' ) {
style.backgroundPosition = 'top left';
} else {
style.color = settings.defaultTextColor;
}
$el.hide().css(style).show();
});
}
});
}, delay);
});
});
