mootools_使用MooTools创建动画滑动按钮

mootools

Buttons (or links) are usually the elements on our sites that we want to draw a lot of attention to. Unfortunately many times they end up looking the most boring. You don't have to let that happen though! I recently found a Tympanus post which provided a great method for making button have an unexpected pop. Here's a quick tutorial on how to duplicate that look using MooTools.

按钮(或链接)通常是我们要吸引很多注意力的站点上的元素。 不幸的是，很多时候他们最终看起来最无聊。 不过，您不必让这种情况发生！ 我最近发现了一个鼓膜帖子 ，该帖子提供了一种使按钮产生意外弹出的好方法。 这是有关如何使用MooTools复制外观的快速教程。

View Demo 观看演示

HTML (The HTML)

   
   

    
    
    Use your Twitter ID
    
    
    Sign in

   
   

   
   

    
    
    Use your Twitter ID
    
    
    Sign in

   
   

The system works off of one DIV, two As and SPAN elements. Note the IDs and CSS classes for the CSS.

该系统基于一个DIV，两个As和SPAN元素工作。 注意CSS的ID和CSS类。

CSS (The CSS)

.button_wrap{ position:relative; width:225px; height:36px; overflow:hidden; font-weight:bold; font-size:11px; margin:10px; }
.button_aLeft{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; right:0px; position:absolute; line-height:36px; text-align:left; }
.button_aLeft span{ /* display:none; */ visibility:hidden; padding-left:20px; color:#fff; }
.button_aRight{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; left:0px; position:absolute; line-height:36px; text-align:right; }
.button_aRight span{ /* display:none; */ visibility:hidden; padding-right:20px; color:#fff; }

.button_bLeft{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; right:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer; }
.button_bLeft span{ color:#008ddd; }
.button_bRight{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; left:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer; }
.button_bRight span{ color:#008ddd; }

.button_c{ background-color:#008ddd; color:#fff; text-transform:uppercase; }
.button_c span{ color:#093d6f; }

The CSS code above mirrors the original code with the exception that "display:none;" was changed to "visibility:hidden", per the differences in MooTools and jQuery fading methodology. Feel free to modify the basic color/formatting styles in any way you'd like.

上面CSS代码反映了原始代码，但“ display：none;”例外。 根据MooTools和jQuery淡入方法的差异，更改为“ visibility：hidden”。 随时以您想要的任何方式修改基本的颜色/格式样式。

MooTools JavaScript (The MooTools JavaScript)

window.addEvent('domready',function() {
	$$('.slidebttn').each(function(btn) {
		var prev = btn.getPrevious('a').set('tween',{ duration: 200 });
		var span = prev.getElement('span');
		btn.addEvents({
			mouseenter: function(e) { 
				btn.addClass('button_c');
				prev.tween('width',225);
				span.fade('in');
			},
			mouseleave:function(e) {
				btn.removeClass('button_c');
				prev.tween('width',70);
				span.fade('out');
			}
		});
	});
});

The first step is grabbing all button containers and identifying the SPAN and A elements within them. Then we add mouseenter and mouseleave events to the container which do the animation of the primary A/SPAN elements.

第一步是抓取所有按钮容器并标识其中的SPAN和A元素。 然后，我们将mouseenter和mouseleave事件添加到容器中，以对主要A / SPAN元素进行动画处理。

View Demo 观看演示

Great work by Tympanus. The effect is classy and well executed. Now go and use this on your next project!

鼓膜的伟大工作。 效果是一流的，执行得很好。 现在开始在下一个项目中使用它！

翻译自: https://davidwalsh.name/animated-button

mootools