jQuery调用函数

Question

这是我的jQuery代码，我为每个div制作动画。但需要一些时间来更新每个动画（每个动画都是相同的）。是否有可能宣布一个函数相同的动画代码，只是调用它的jQuery代码中（每个鼠标悬停功能里面）

jQuery的

$(document).ready(function() 
{ 

    $("#s1").mouseover 
    (
     function test() 
     { 
      $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300); 
     } 
    ); 


    $("#s2").mouseover 
    (
     function() 
     { 
      $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300); 
     } 
    ); 


    $("#s3").mouseover 
    (
     function() 
     { 
      $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300); 
     } 
    ); 


    $("#s4").mouseover 
    (
     function() 
     { 
      $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300); 
     } 
    ); 

    $("#s5").mouseover 
    (
     function() 
     { 
      $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300); 
     } 
    ); 


    $("#s6").mouseover 
    (
     function() 
     { 
      $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300); 
     } 
    ); 


    $("#s7").mouseover 
    (
     function() 
     { 
      $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300); 
     } 
    ); 


    $("#s8").mouseover 
    (
     function() 
     { 
      $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300); 
     } 
    ); 


    $(".speeddial").mouseout 
    (
     function() 
     { 
      $(this).stop().animate({borderColor:"#AEAEAE",backgroundColor:"#49A655", color:"#FFFFFF"},300); 
     } 
    );  
} 

）;

HTML

<a href="#"><div class="speeddial" id="s1">POPIS GOLUBOVA</div></a> 
    <a href="#"><div class="speeddial" id="s2">POPIS GOLUBOVA</div></a> 
    <a href="#"><div class="speeddial" id="s3">POPIS GOLUBOVA</div></a> 
    <a href="#"><div class="speeddial" id="s4">POPIS GOLUBOVA</div></a> 
    <div style="clear:both; margin-top:25px;"></div> 
    <a href="#"><div class="speeddial" id="s5">POPIS GOLUBOVA</div></a> 
    <a href="#"><div class="speeddial" id="s6">POPIS GOLUBOVA</div></a> 
    <a href="#"><div class="speeddial" id="s7">POPIS GOLUBOVA</div></a> 
    <a href="#"><div class="speeddial" id="s8">POPIS GOLUBOVA</div></a> 

Answer 1

可以声明单独的功能：

//(I indented some of it for easier readability) 
function mouseOverFunc() { 
    $(this).stop().animate({ 
     borderColor: "#49A655", 
     backgroundColor: "#333", 
     color: "#49A655" 
    }, 300); 
} 

然后：

$("#s1").mouseover(mouseOverFunc) 
$("#s2").mouseover(mouseOverFunc) 
$("#s3").mouseover(mouseOverFunc) 
// etc. 

而且，因为它们都具有相同的类，你可以使它更简洁：

$(".speeddial").mouseover(mouseOverFunc) 

Answer 2

所有的mouseenter功能似乎是相同的？如果我错了，请纠正我，并且所有的锚标记都具有相同的类，因此将其应用于类而不是ID。

试试这个。

$('.speeddial').on('mouseenter',function(){ 
    $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300); 
}); 

$('.speeddial').on('mouseleave',function(){ 
    $(this).stop().animate({borderColor:"#AEAEAE",backgroundColor:"#49A655", color:"#FFFFFF"},300); 
}); 

Answer 3

用户多重选择器，像这样：

$("#s1, #s2, #s3, #s4, #s5, #s6, #s7").mouseover(function(){ 
    $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300); 
}); 

或者更简单地说：

$(".speeddial").mouseover(function(){ 
    $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300); 
}); 

对于性能，您应该使用CSS 3度的转变，只有jQuery和回退增益：

.speeddial { 
    //your CSS code 
    border-color: #AEAEAE; 
    background-color:#49A655; 

    -moz-transition: all 300ms linear; 
    -webkit-transition: all 300ms linear; 
    -o-transition: all 300ms linear; 
    transition: all 300ms linear; 
} 


.speeddial:hover { 
    background-color: #333; 
    border-color: #49A655; 
}