jquery mouseneter and unbind

Question

ran into a wall and need some help

I am working on a project, and basically.. when you hover over the image, I need it to "pause". When you mouse out, it toggles back.

I have this working once... but because I am unbinding the event, It only works once.

Can steer me in the right direction? Would be greatly appreciated

here is my snippet:

$("#card1").mouseenter(function(){
     $("#overlay1").css("z-index","30").show("slide", { direction: "down" }, 700); 
     $("#pope1").css("z-index","30").hide("slide", { direction: "down" }, 700); 
     $(this).unbind("mouseenter")
});

$("#card1").mouseleave(function(){

     $("#overlay1").css("z-index","30").hide("slide", { direction: "down" }, 700); 
     $("#pope1").css("z-index","30").show("slide", { direction: "down" }, 700); 
     $(this).unbind("mouseleave")

});

Answer 1

I don't think you necessarily need to unbind any events in this situation. Try changing your code to how this jsFiddle is set up: http://jsfiddle.net/CMbQB/

$('div').on('mouseover mouseout', function(e){
    if(e.type === "mouseover") {
        //mouse over events
    }
    else if(e.type === "mouseout") {
        //mouse out events
    }
});