短一個jQuery代碼

Question

我做了一個簡單的動畫jQuery代碼，但是這個代碼是太長了，我想知道是否有可能縮短這些排長隊：

我的jsfiddle爲例：http://jsfiddle.net/ZDhzJ/2/

$("#UN").mouseover(function() { 
    $("#UNbis").stop().animate({opacity: 1}); 
}); 
$("#UN").mouseout(function() { 
    $("#UNbis").stop().animate({opacity: 0}); 
}); 

$("#DEUX").mouseover(function() { 
    $("#DEUXbis").stop().animate({opacity: 1}); 
}); 
$("#DEUX").mouseout(function() { 
    $("#DEUXbis").stop().animate({opacity: 0}); 
}); 

$("#TROIS").mouseover(function() { 
    $("#TROISbis").stop().animate({opacity: 1}); 
}); 
$("#TROIS").mouseout(function() { 
    $("#TROISbis").stop().animate({opacity: 0}); 
}); 

$("#QUATRE").mouseover(function() { 
    $("#QUATREbis").stop().animate({opacity: 1}); 
}); 
$("#QUATRE").mouseout(function() { 
    $("#QUATREbis").stop().animate({opacity: 0}); 
}); 

Answer 1

加入選擇器和事件處理程序，添加bis到目標ID：

$('#UN, #DEUX, #TROIS, #QUATRE').on('mouseenter mouseleave', function(e) { 
    $('#'+this.id+'bis').stop().animate({opacity: e.type=='mouseenter'?1:0}); 
}); 

FIDDLE

Answer 2

你可以這樣做：

• 添加類myDiv到的div將徘徊在
• 查找使用函數作用域的div內的。

JS：

$(".myDiv").mouseover(function() { 
    $(this).find('span').stop().animate({opacity: 1}); }); 
$(".myDiv").mouseout(function() { 
    $(this).find('span').stop().animate({opacity: 0}); }); 

演示：Fiddle

Answer 3

$('#UN, #DEUX, #TROIS, #QUATRE').hover(function(e) {// work as mouseover 
    $('#'+this.id+'bis').stop().animate({opacity: 1}); 
}, 
function(e){//work as mouseout 
    $('#'+this.id+'bis').stop().animate({opacity: 0}); 

}); 

可以hover

看到DEMO

嘗試