Функция вызова 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; 
}