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; 
}