[jQuery / CSS] Animate Problem

body .top-menu li span {
	vertical-align: middle;
}

$('.text-toggle').hover(function() {	$(this).children("a").children("span").stop().animate({width: 'toggle'},"fast");});

<div class="top-menu">	<li class="text-toggle"><a href="#"><i class="fa fa-sign-out"></i> <span>Abmelden</span></a></li></div>

body .top-menu {	background: rgba(0,0,0,.5);	border-bottom: 1px solid rgba(255,255,255,0.15);        height: 50px;	position: relative;}body .top-menu li {	font-size: 125%;	height: 50px;	line-height: 50px;	padding: 0 15px;	text-shadow: 0 1px 2px rgba(0, 0, 0, .4);	list-style: none;	float: left;}body .top-menu li a {	color: white;	text-decoration: none;}