当前位置:主页 > 网页特效 > 菜单导航 >

jQuery超酷文本和图标动画菜单特效

发布时间:2018/07/03 来源:互联网 浏览: 关键词:jquery 菜单导航 动画效果 
jQuery超酷文本和图标动画菜单特效 jQuery超酷文本和图标动画菜单特效
阿里云

简要教程

这是一款效果非常酷的 jQuery超酷文本和图标动画菜单特效插件

HTML结构

html结构使用无序列表,每一个列表项都包含一个a元素,a元素中有三个用于动画的元素。

<ulid="sti-menu"class="sti-menu">
  <lidata-hovercolor="#37c5e9">
    <ahref="#">
      <h2data-type="mText"class="sti-item">
        Some text
      </h2>
      <h3data-type="sText"class="sti-item">
        Some more text
      </h3>
      <spandata-type="icon"class="sti-icon sti-icon-care sti-item">
      </span>
    </a>
  </li>
  <li>...</li>
  ...
</ul>

data-hovercolor将被用来设置鼠标滑过时文本的颜色。同时我们也给标题元素和图标span一些data-type,以便在后面用jQuery来控制它们。

JAVASCRIPT

首先定义一些默认设置:

varsettings = {
    // 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为向下)。

returnthis.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'))
        returnfalse;      
      
    $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);
    });
});

共有人阅读,期待你的评论!评论
Top