简化冗余jQuery代码

我想简化页脚弹出/工具提示动画的jQuery代码，因为它是冗余的，不太可扩展。我找到了这个帖子：但我不知道如何将它应用到我的情况中。谢谢

<div id="footer-wrap">
    <div id="footer">
        <ul>
            <li class="copyright"><a href="#" >copyright</a></li>
            <li class="facebook"><a href="#" target="_blank">facebook</a></li>
            <li class="twitter"><a href="#" target="_blank">twitter</a></li>
            <li class="wordpress"><a href="#" target="_blank">blog</a></li>
        </ul>       
    </div>
    <div class="popup">
        <p class="popup-wordpress"><span class="popup-icon"></span><span class="popup-text">Check Out Our Blog</span></p>
        <p class="popup-twitter"><span class="popup-icon"></span><span class="popup-text">Follow us on Twitter</span></p>
        <p class="popup-facebook"><span class="popup-icon"></span><span class="popup-text">Become a fan on Facebook</span></p>
        <p class="popup-copyright"><span class="popup-text">Copyright &copy; 2011<br />All Rights Reserved</span></p>
    </div>
</div>


$(function() {
   $('.copyright').hover(
    function() {
        $('.popup-copyright').stop().animate({ marginTop: -52 }, 100);
    },
    function() {
        $('.popup-copyright').stop().animate({ marginTop: 0 }, 100);
});
$('.copyright').click(function() {
        return false
    });
$('.facebook').hover(
    function() {
        $('.popup-facebook').stop().animate({ marginTop: -52 }, 100);
    },
    function() {
        $('.popup-facebook').stop().animate({ marginTop: 0 }, 100);
});
$('.twitter').hover(
    function() {
        $('.popup-twitter').stop().animate({ marginTop: -52 }, 100);
    },
    function() {
        $('.popup-twitter').stop().animate({ marginTop: 0 }, 100);
});
$('.wordpress').hover(
    function() {
        $('.popup-wordpress').stop().animate({ marginTop: -52 }, 100);
    },
    function() {
        $('.popup-wordpress').stop().animate({ marginTop: 0 }, 100);
});
    });

查看我们的博客

在twitter上关注我们
成为facebook的粉丝
版权与复制；2011
版权所有
$（函数（）{
$（'.copyright'）。悬停(
函数（）{
$（'.popup copyright'）.stop（）.animate（{marginTop:-52}，100）；
},
函数（）{
$（'.popup copyright'）.stop（）.animate（{marginTop:0}，100）；
});
$（'.copyright'）。单击（函数（）{
返回错误
});
$（'.facebook'）。悬停(
函数（）{
$（'.popup facebook'）.stop（）.animate（{marginTop:-52}，100）；
},
函数（）{
$（'.popup facebook'）.stop（）.animate（{marginTop:0}，100）；
});
$（'.twitter'）。悬停(
函数（）{
$（'.popup twitter'）.stop（）.animate（{marginTop:-52}，100）；
},
函数（）{
$（'.popup twitter'）.stop（）.animate（{marginTop:0}，100）；
});
$（'.wordpress'）。悬停(
函数（）{
$（'popup wordpress'）.stop（）.animate（{marginTop:-52}，100）；
},
函数（）{
$（'.popup wordpress'）.stop（）.animate（{marginTop:0}，100）；
});
});

如果这些是悬停元素上的唯一类，则可以执行以下操作：

$('.copyright,.facebook,.twitter,.wordpress').hover(
    function() {
        $('.popup-' + this.className).stop().animate({ marginTop: -52 }, 100);
    },
    function() {
        $('.popup-' + this.className).stop().animate({ marginTop: 0 }, 100);
});
$('.copyright').bind('click',false);

或者像这样稍微短一点：

$('.copyright,.facebook,.twitter,.wordpress').hover( function(e) {
    $('.popup-' + this.className).stop().animate({ marginTop: e.type === 'mouseenter' ? -52 : 0 }, 100);
});
$('.copyright').bind('click',false);

注意，

.bind（'click'，false）需要jQuery 1.4.3或更高版本

…或者更好的是，使用这种方法

非常感谢。这正是我需要的。
$('#footer').delegate('li','hover' function(e) {
    $('.popup-' + this.className).stop().animate({ marginTop: e.type === 'mouseenter' ? -52 : 0 }, 100);
});
$('.copyright').bind('click',false);