div - tooltip jquery ejemplos

Simplifique el código jQuery redundante

Question

Me gustaría simplificar mi código jQuery para una animación de pie de página / información sobre herramientas porque es redundante y no muy extensible. Encontré esta publicación: código jQuery para simplificar, pero no pude encontrar la forma de aplicarlo a mi situación. ¡Gracias!

<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);
});
    });

Answer 1

Si esa será la única clase sobre los elementos que se ciernen, puede hacer esto:

$(''.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);

o incluso un poco más corto como este:

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

Tenga en cuenta que .bind(''click'',false); requiere jQuery 1.4.3 o posterior.

... o mejor aún, use el método delegate() ^(docs) .

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