Question

我对jQuery很新，所以请保持温和。

我在网上发现了两篇文章：

使用jQuery为翻转精灵添加淡入/淡出： http://css-tricks.com/fade-image-within-sprite/ （Way The Third：Legacy Support版本）
Animating a Hover with jQuery

我已经使用了这两个例子，并设法使它们协同工作：

http://www.marccohen.co.uk/dev/menu_example.htm

一个列表中的翻转淡入精灵也会触发另一个列表中的动画悬停，反之亦然。麻烦是我得到的jQuery'非常'很长并且对此很新，我不知道如何缩短它：

$(function() {
$(".menuicon1")
.find("span")
.hide()
.end()
.hover(function() {
    $(this).find("span").stop(true, true).fadeIn({duration:300});
    $('ul.hover_block li.slide1').find('img').animate({top:'192px'},{queue:false,duration:150});
}, function() {
    $(this).find("span").stop(true, true).fadeOut({duration:300});
    $('ul.hover_block li.slide1').find('img').animate({top:'276px'},{queue:false,duration:150});
});
$(".menuicon2")
.find("span")
.hide()
.end()
.hover(function() {
    $(this).find("span").stop(true, true).fadeIn({duration:300});
    $('ul.hover_block li.slide2').find('img').animate({top:'192px'},{queue:false,duration:150});
}, function() {
    $(this).find("span").stop(true, true).fadeOut({duration:300});
    $('ul.hover_block li.slide2').find('img').animate({top:'276px'},{queue:false,duration:150});
});
$(".menuicon3")
.find("span")
.hide()
.end()
.hover(function() {
    $(this).find("span").stop(true, true).fadeIn({duration:300});
    $('ul.hover_block li.slide3').find('img').animate({top:'192px'},{queue:false,duration:150});
}, function() {
    $(this).find("span").stop(true, true).fadeOut({duration:300});
    $('ul.hover_block li.slide3').find('img').animate({top:'276px'},{queue:false,duration:150});
}); 
$(".menuicon4")
.find("span")
.hide()
.end()
.hover(function() {
    $(this).find("span").stop(true, true).fadeIn({duration:300});
    $('ul.hover_block li.slide4').find('img').animate({top:'192px'},{queue:false,duration:150});
}, function() {
    $(this).find("span").stop(true, true).fadeOut({duration:300});
    $('ul.hover_block li.slide4').find('img').animate({top:'276px'},{queue:false,duration:150});
}); 
$(".menuicon5")
.find("span")
.hide()
.end()
.hover(function() {
    $(this).find("span").stop(true, true).fadeIn({duration:300});
    $('ul.hover_block li.slide5').find('img').animate({top:'192px'},{queue:false,duration:150});
}, function() {
    $(this).find("span").stop(true, true).fadeOut({duration:300});
    $('ul.hover_block li.slide5').find('img').animate({top:'276px'},{queue:false,duration:150});
}); 
    $('ul.hover_block li.slide1').hover(function(){
    $(this).find('img').animate({top:'192px'},{queue:false,duration:150});
    $('.menuicon1').find("span").stop(true, true).fadeIn({duration:300});
}, function(){
    $(this).find('img').animate({top:'276px'},{queue:false,duration:150});
    $('.menuicon1').find("span").stop(true, true).fadeOut({duration:300});
});
    $('ul.hover_block li.slide2').hover(function(){
    $(this).find('img').animate({top:'192px'},{queue:false,duration:150});
    $('.menuicon2').find("span").stop(true, true).fadeIn({duration:300});
}, function(){
    $(this).find('img').animate({top:'276px'},{queue:false,duration:150});
    $('.menuicon2').find("span").stop(true, true).fadeOut({duration:300});
});         
    $('ul.hover_block li.slide3').hover(function(){
    $(this).find('img').animate({top:'192px'},{queue:false,duration:150});
    $('.menuicon3').find("span").stop(true, true).fadeIn({duration:300});
}, function(){
    $(this).find('img').animate({top:'276px'},{queue:false,duration:150});
    $('.menuicon3').find("span").stop(true, true).fadeOut({duration:300});
});             
    $('ul.hover_block li.slide4').hover(function(){
    $(this).find('img').animate({top:'192px'},{queue:false,duration:150});
    $('.menuicon4').find("span").stop(true, true).fadeIn({duration:300});
}, function(){
    $(this).find('img').animate({top:'276px'},{queue:false,duration:150});
    $('.menuicon4').find("span").stop(true, true).fadeOut({duration:300});
});             
    $('ul.hover_block li.slide5').hover(function(){
    $(this).find('img').animate({top:'192px'},{queue:false,duration:150});
    $('.menuicon5').find("span").stop(true, true).fadeIn({duration:300});
}, function(){
    $(this).find('img').animate({top:'276px'},{queue:false,duration:150});
    $('.menuicon5').find("span").stop(true, true).fadeOut({duration:300});
});                                 
});

真的很感激任何建议......

Answer 1

正如@ Dave-Newton已经正确提到的那样，为了缩短任何重复代码，您必须识别一遍又一遍地重复的部分以及那些唯一的部分

在你的情况下，有一个（据我所见）两个主要的代码块。

$(".menuicon1") .find("span") .hide() .end() .hover(function() { $(this) .find("span") .stop(true, true) .fadeIn({ duration: 300 }); $('ul.hover_block li.slide1') .find('img') .animate({ top: '192px' },{ queue:false, duration: 150 }); }, function() { $(this) .find("span") .stop(true, true) .fadeOut({ duration: 300 }); $('ul.hover_block li.slide1') .find('img') .animate({ top: '276px' },{ queue: false, duration: 150 }); });

显然，每次调用只有css类的数字后缀不同。因此，您可能只需创建一个带有数字输入的函数，并将其添加到动态部分：

function createBlockHover(blockNumber) { $(".menuicon" + blockNumber) .find("span") .hide() .end() .hover(function() { $(this) .find("span") .stop(true, true) .fadeIn({ duration: 300 }); $('ul.hover_block li.slide' + blockNumber) .find('img') .animate({ top: '192px' },{ queue:false, duration: 150 }); }, function() { $(this) .find("span") .stop(true, true) .fadeOut({ duration: 300 }); $('ul.hover_block li.slide' + blockNumber) .find('img') .animate({ top: '276px' },{ queue: false, duration: 150 }); }); }

之后你仍然可以减少悬停调用中的程序，因为那个做动画和褪色。顶部和渐变方向（输入/输出）在这里有所不同：

function fadeBlocks(blockNumber, fadeIn, top) { // fade the first block $('.menuicon' + blockNumber) .find("span") .stop(true, true) [fadeIn ? 'fadeIn' : 'fadeOut']({ duration: 300 }); // move the second $('ul.hover_block li.slide' + blockNumber) .find('img') .animate({ top: top + 'px' }, { queue: false, duration: 150 }) } function createBlockHover(blockNumber) { $(".menuicon" + blockNumber) .find("span") .hide() .end() .hover(function() { fadeBlocks(blockNumber, true, 192); }, function() { fadeBlocks(blockNumber, false, 276); }); }

我希望稍微展示一下这个过程，这样你就知道如何使用代码的后半部分进行处理。

有关详细信息，请查看DRY代码的原则。

我该如何缩短这个jQuery？

1 个答案: