jQuery call function

Question

This is my jquery code where I make animation for every single div. But takes some time to update every animation (every animation is the same). Is it possible to declare one function with the same animation code and just call it inside jquery code (inside every mouseover function)

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

User a multi selector, like this:

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

Or more simply:

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

For gain in performance you should use CSS 3 transitions, and only jquery and fallback:

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

Answer 2

You can declare the function separately:

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

Then:

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

Also, since they all have the same class, you could make it even more concise:

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

Answer 3

All of the mouseenter functions seem to be identical? Please correct me if I'm wrong , and all of the anchor tags have the same class, so apply it to the class rather than the ID.

Try this.

$('.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);
});