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

Question

我正在尝试获取翻转脚本以将我的社交网络 link 从 32 像素的方形图标调整为相同的图标，加上尾随地址。因此，如果我将鼠标悬停在我的 Facebook link 上，link 将从

[f] [t] [g]

到

[f /facebookpage] [t] [g]

Twitter 将从

开始

[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')，但没用（returns 同样的事情），而且 $(this).children('.social-networks li a') 什么也没做。有没有办法 select 只有那个特定的元素？

Answer 1

在您的悬停函数中，您应该为 $(this) 而不是缓存网络设置动画。 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
              }

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

Resize jQuery to auto script works ... on all links

jquery

css

jquery-animate

width