using the same function of different events

Question

This seems pretty simple, but I can't figure it out. I'm new to javascript/ jquery.

i want to trigger a function to move a div onmouseover, and another onmouseout. I want to call this same function on several different divs. how would I do this without writing multiple functions?

  <div id="indexJoinBanner" onmouseover="moveDivRight()" onmouseout="moveDivLeft()"> 
  <!-- end #indexJoinBanner --></div>
  <div id="indexJoinBanner2" onmouseover="moveDivRight()" onmouseout="moveDivLeft()"> 
  <!-- end #indexJoinBanner2 --></div>



function moveDivRight(){
  $("#indexJoinBanner").animate({
    left: "0px",
  },500 );
};

function moveDivLeft() {
  $("#indexJoinBanner").animate({
    left: "-150px",
  },500 );
}

Thanks

Answer 1

$("#indexJoinBanner, #indexJoinBanner2").hover(function () {
    $(this).animate({left: '0px'}, 500);
},
function () {
    $(this).animate({left: '-150px'}, 500);
});

.hover allows you to bind mouseover and mouseout simultaneously, but you can also bind them separately.

You can use this to refer to the object that is the target of the binding (even if you bind to multiple elements at once).

You can also bind named functions if you want to.

NOTE: in this solution, the onmouseover, etc. attributes are not required in the HTML at all.