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