调整jQuery大小到自动脚本工作..。在所有链接上

Question

我正试图获得一个滚动脚本，以调整我的社交网络链接大小从一个32 to平方图标到相同的图标，加上尾随地址。所以如果我在我的Facebook链接上徘徊，链接就会从

[f] [t] [g]

至

[f /facebookpage] [t] [g]

推特会从

[f] [t] [g]

至

[f] [t @twitter] [g]

下面是我使用的脚本：

$(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
}

在单个图标上，我显然没有问题，但是当我有多个图标时，它会调整它们的大小。我尝试过$(this).find('.social-networks li a')，但这没有起作用(返回相同的东西)，而$(this).children('.social-networks li a')什么也不做。是否有一种选择特定元素的方法？

Answer 1

在您的悬停函数中，您应该将$(this)动画化，而不是缓存网络。此变量将引用悬浮元素，然后将其包装在jquery对象中以使用jquery动画。您的网络变量可能是包含所有社交图标的数组。

$(function(){
                var network = $('.social-networks li a'),
                    animateTime = 75,
                    navLink = $('.social-networks li a');
                navLink.hover(function(){
                    var $this = $(this);
                    if($this.width() === 32){
                        autoWidthAnimate($this, animateTime);
                    } else {
                        $this.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
              }