I am attempting to create a rollover script that will resize my social network links when hovered over. The desired effect is for the 32px square icon to expand and display the trailing address. For example, when hovering over the Facebook link, it should transition from
[f] [t] [g]
to
[f /facebookpage] [t] [g]
Similarly, the Twitter link should change from
[f] [t] [g]
to
[f] [t @twitter] [g]
Below is the current script I am using:
$(function(){
var network = $('.social-networks li a'),
animateTime = 75,
navLink = $('.social-networks li a');
navLink.hover(function(){
if(network.width() === 32){
autoWidthAnimate(network, animateTime);
} else {
network.stop().animate({ width: '32' }, animateTime);
}
});
})
function autoWidthAnimate(element, time){
var curWidth = element.width(), // Get default width
autoWidth = element.css('width', 'auto').width(); // Get auto width
element.width(curWidth); // Reset to default width
element.stop().animate({ width: autoWidth }, parseInt(time)); // Animate to auto width
}
While this script works fine for individual icons, I encounter issues when there are multiple icons as it resizes them all together. I have attempted
$(this).find('.social-networks li a')$(this).children('.social-networks li a')