CODEWITHSUNDEEP
jquery
Peter
Peter

Reputation: 1541

jQuery hover first and hover second

When I hover on the first, then it will show Second.

If I then hover to Second, Second shall remain show, else hide Second.

My problem is in between hover first and hover Second it get too fast hiding the Second.

How do I delay the $(".second").hide("slow" ); before I hover to second?

  $(".first").hover(
    function(){
      $(".second").show();
    },
    function(){
      $(".second").hide("slow" );
    }
  );

 $(".second").hover(
   function(){
     $(".second").show();
   },
   function(){
    $(".second").hide("slow" );
   }
 );

Upvotes: 0

Views: 106

Answers (2)

anshuVersatile
anshuVersatile

Reputation: 388

$( "#clickme" ).click(function() {
$( "#book" ).hide( "slow", function() {
alert( "Animation complete." );
});
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

The solution is to use a timer using setTimeout()

var $second = $(".second");
$(".first").hover(function () {
    clearTimeout($second.data('timer'));
    $second.stop(true, true).show();
}, function () {
    var timer = setTimeout(function () {
        $second.stop(true, true).hide("slow");
    }, 200);
    $second.data('timer', timer);
});

$(".second").hover(function () {
    clearTimeout($second.data('timer'))
    $second.stop(true, true).show();
}, function () {
    $second.stop(true, true).hide("slow");
});

Demo: Fiddle

Upvotes: 3

Related Questions