Question

我正在研究一个小提琴，似乎有很多JQuery似乎是一个简单的动画。是否有办法缩短这一点，因为它看起来有点沉重？

任何帮助都将不胜感激。

JQuery -

// Services

// Mens
$("#mens").hover(function(){
    $("#mens .box").stop().fadeToggle(500);
},
function(){
    $("#mens .box").stop().fadeToggle(500);
});

// Womens
$("#womens").hover(function(){
    $("#womens .box").stop().fadeToggle(500);
},
function(){
    $("#womens .box").stop().fadeToggle(500);
});

// Kids
$("#kids").hover(function(){
    $("#kids .box").stop().fadeToggle(500);
},
function(){
    $("#kids .box").stop().fadeToggle(500);
});

// Work Wear
$("#workwear").hover(function(){
    $("#workwear .box").stop().fadeToggle(500);
},
function(){
    $("#workwear .box").stop().fadeToggle(500);
});

// Education
$("#education").hover(function(){
    $("#education .box").stop().fadeToggle(500);
},
function(){
    $("#education .box").stop().fadeToggle(500);
});

Answer 1

为所有这些元素提供一个共同的类（例如hover）

然后，使用此代码：

$('.hover').hover(function() {
    $('.box', this).stop().fadeToggle(500);
});

如果hoverIn和hoverOut回调做同样的事情，则无需使用两个回调。

Answer 2

只需使用此函数为您的所有元素提供一个将它们链接在一起的类名。例如：

<div id="mens" class="hover">

然后通过调用.box简单地获取您悬停在其中的元素中包含的$(this).find('.box')元素：

$(".hover").hover(function(){
    $(this).find('.box').stop().fadeToggle(500);
});

请注意，如果两者都做同样的事情，则无需在悬停中重复该功能。

JSFiddle demo

Answer 3

 $('#id1,#id2,...#idN').hover(function() {
     $('.box', this).stop().fadeToggle(500);
 },
 function() {
     $('.box', this).stop().fadeToggle(500);
 });

OR：

$('.box').parent().hover(function(){
    $('.box', this).stop().fadeToggle(500);
});

或者：

$('div:has(.box)').hover(function(){
    $('.box', this).stop().fadeToggle(500);
});

DEMO

Answer 4

 $("#mens,#womens,#kids,#workwear,#education").hover(function(){
    $(this).children(".box").stop().fadeToggle(500);
},
function(){
     $(this).children(".box").stop().fadeToggle(500);
});

Try here ;)

Answer 5

顺便说一句，这可以通过CSS转换轻松完成，不需要JavaScript（这种方法的开销可能更少）：

transition: background 2s;

http://jsfiddle.net/9hctsxme/

缩短此代码的最佳方法是什么？

5 个答案: