ex-SPAN-der

Simply jQuery example to expand a span element and reveal an abbreviated word.

by psyon001

HTML

<h1 class="page-title">T<span>ravis</span> W<span>ilson</span></h1>

CSS

h1{
    text-align:center;
    font-size: 2.5em;
}
h1 span{
    display: inline-block;
    opacity: 0;
    overflow: hidden;
}

JavaScript

var $exSpan = $('.page-title').find('span'), 
    spanWidth = [];

$exSpan.each(function() {
    spanWidth.push($(this).width());
});

$exSpan.width(0);

$('.page-title').on({
    mouseenter: function() {
        $exSpan.each(function(i,el) {
            $(el).stop().animate({
                width: spanWidth[i],
                opacity: 1
            });
        });
    },
    mouseleave: function() {
        $exSpan.each(function() {
            $(this).stop().animate({
                width: 0,
                opacity: 0
            });
        });
    }
});
/*
$('.page-title').on({
    mouseenter: function() {

        $('.page-title span').stop().animate({
            width: spanWidth,
            opacity: 1
        });
    },
    mouseleave: function() {
        $('.page-title span').stop().animate({
            width: 0,
            opacity: 0
        });
    }
});*/