简化多余的jQuery代码


Answers

Question

我想简化我的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);
});
    });