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

You can pass the div to the function like

<div id="indexJoinBanner" onmouseover="moveDivRight(this)" onmouseout="moveDivLeft(this)"> 

and use it in the function

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

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

this in the attributes specify the current element.

Alternatively you can attach handler using .on() instead of onmouseover and onmouseout attributes, give all the elements you want to attach the handler a class then

$('.someclass').on('mouseover', function () {
  $(this).animate({
    left: "0px",
  },500 );
}).on('mouseout', function () {
  $(this).animate({
    left: "-150px",
  },500 );
})

DEMO