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> 

• Kovge: offtopic but a little validation problem, div is a block level element, a is inline level element and an inline level element can not contains block level element. It is not problem for browsers maybe, but makes your live harder if not follow w3c. (for example in floating can cause complications) And all of all, the valid HTML struct should be the goal of all sitebuilder, but i know it is an utopia :)

Answer 1

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 2

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

• FosAvance: This first code you have written also has helped me. Thank you

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

• FosAvance: problem is that all links are on the same page, so when I mouseover one link it animates everything