简短的jquery代码答案

【问题标题】：Short a jquery code简短的jquery代码
【发布时间】：2013-10-29 19:27:02
【问题描述】：

我做了一个简单的动画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}); 
});

【问题讨论】：

标签： jquery jquery-animate mouseover long-integer

【解决方案1】：

你可以这样做：

将myDiv 类添加到要悬停的 div 上
使用函数作用域在 div 中查找 span。

JS：

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

演示：Fiddle

【讨论】：

【解决方案2】：

加入选择器和事件处理程序，将bis 添加到目标ID：

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

FIDDLE

【讨论】：

【解决方案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

【讨论】：