gpt4 book ai didi

jquery - 简化冗余的 jQuery 代码

转载 作者:搜寻专家 更新时间:2023-10-31 08:04:19 25 4
gpt4 key购买 nike

我想简化我的页脚弹出/工具提示动画的 jQuery 代码,因为它是多余的并且不是很可扩展。我找到了这篇文章:jQuery code to simplify但无法弄清楚如何将其应用于我的情况。谢谢!

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

最佳答案

如果这些将是悬停元素上的唯一类,您可以这样做:

$('.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 或更高版本。

...或者更好的是,使用 delegate()(docs)方法。

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

关于jquery - 简化冗余的 jQuery 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4951114/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com