Show image after there is hover on a link for 1500ms

I want to show an image after there is hover on link for atleast 1500ms or there is a click. How can I implement this开发者_开发百科 minimal period hover condition while showing up the image ?

The image should remain visible until there is hover on the link or on itself. & should disappear as the mouse moves out of both. How can I implement this ? Thanks in advance!

http://jsfiddle.net/sSBxv/

$('a').click(function() {

          alert(1); // alert on click

      })

      .hover(function() { // when mouse is entering

          var $this = $(this);

          // set timeout, save timeout id on element to clear later
          $this.data('timeout', setTimeout(function() {
              $this.click(); // click after 1500ms
          }, 1500));

       }, function() { // when mouse is leaving

              clearTimeout($(this).data('timeout')); // stop the timeout

       });

Try this

var hoverTimer;
$("linkSelector").hover(function() {
  hoverTimer = setTimeout(function() {
    $("imgSelector").show();
  }, 1500);

}, function(){
   clearTimeout(hoverTimer);
}).click(function(){
   clearTimeout(hoverTimer);
   $("imgSelector").show();
});

Something to the effect of...

$("#MyLinkSelectorId").hover(function() {

      //Do anything you need to do here when it is clicked/hovered

      setTimeout(function() {

               //Do all of the other things here

      }, 1500);

});

Switch out hover with click or bind multiple events to take care of both event types. To hide the images, you can either use a selector on the images with the .hide() method or you can set the opacity if the browser supports it.

$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
    $("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
    setTimeout( function(){
        $("img").hide();
    }, 1500);
}).click( function() { //on click, hide the image right away.
    $("img").hide();
});

Since it looks like you haven't already tried something I'll give you the simplest way using jQuery (please note I haven't tested this):

$("#idOfDiv").mouseover(function() {
   setTimeout("alertMsg()",1500);
});

function alertMsg()
{
   alert('Ive been entered for 1500ms')
}

Also if you're serious about software development you should've been able to come up with this yourself.