CODEWITHSUNDEEP
jquerycss
SMacFadyen
SMacFadyen

Reputation: 3165

How can I bind this jQuery event to a hover of a HTML element?

What is the syntax to get this bit of jQuery to call when say, h2.myClass is hovered?

$(document).ready(function(){
  setTimeout(function(){
  $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
  $("div.clickme, div.clickMeTimes").remove();
  });

  }, 2500);
});

Thanks to all the answers, alot of them were very good but @SKS went the extra mile with my extra requirements. The below fades in my div in and out on mouse hover instead of the initial on page load. 

$(document).ready(function(){
  $('h2.myClass').hover (function() {
       $("div.clickme, div.clickMeTimes").stop(true).fadeOut("slow");
  }, function () {
       $("div.clickme, div.clickMeTimes").stop(true).fadeIn("slow");       
  });
});

Upvotes: 0

Views: 67

Answers (5)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Since you want something to be executed only on mouse enter. You can just use mouseenter function.

I think below is what you want, 

$(document).ready(function(){
  $('h2.myClass').mouseenter(function() {
    setTimeout(function(){
         $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
            $(this).remove();
         });
    }, 2500);
  });
});

Also modified $("div.clickme, div.clickMeTimes").remove(); inside the callback to $(this).remove() which will remove the corresponding element instead of trying to remove both element.

Edit: Try below, If you it to fadeIn and fadeOut.

$(document).ready(function(){
  $('h2.myClass').hover (function() {
       $("div.clickme, div.clickMeTimes").stop(true).fadeOut("slow");
  }, function () {
       $("div.clickme, div.clickMeTimes").stop(true).fadeIn("slow");       
  });
});

Upvotes: 2

Valerio
Valerio

Reputation: 2590

If you just need to make the hover work:

$("h2.myClass").mouseover(function(){
  $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
  $("div.clickme, div.clickMeTimes").remove();
});

Otherwise if you need to make it work AND stop the timer:

$(document).ready(function(){
  timer = setTimeout(function(){

$("h2.myClass").mouseover(function(){
  clearTimeout(timer);
  $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
  $("div.clickme, div.clickMeTimes").remove();
});

Upvotes: 1

mddw
mddw

Reputation: 5580

Put your logic in a function :

var fadeAndRemove = function() {

     setTimeout(function(){
         $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
              $("div.clickme, div.clickMeTimes").remove();
         });

      }, 2500);
}

then bind it to the hover event :

$("h2.myClass").on('mouseenter', function() {
     fadeAndRemove();
});

Use hover if you have somthing to do on mouseleave also.

Upvotes: 1

Alytrem
Alytrem

Reputation: 2620

$("h2.myClass").hover(function(){
  setTimeout(function(){
  $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
  $("div.clickme, div.clickMeTimes").remove();
  });

  }, 2500);
}

Upvotes: 1

SpYk3HH
SpYk3HH

Reputation: 22570

$(".myClass").hover(function(eIn) { // this is the function for when the mouse is hovered over the item
    //do work
},
function(eOut) {  // this is the func when the mouse leaves the item
    //do work
});

Upvotes: 1

Related Questions