CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5411951
user5411951

Reputation:

how to delay a jquery hover event

I am trying to delay a jquery hover event. The code below is the code i am using.

$(document).ready(function(){

        $('ul.tabs li').hover(function(){
            var tab_id = $(this).attr('data-tab');

            $('ul.tabs li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#"+tab_id).addClass('current');
        })

    })

I have tried changing it to the following code to no avail.

 var delay=1000, setTimeoutConst;
    $('ul.tabs li').on('hover', function() {
         setTimeoutConst = setTimeout(function(){
               var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');

         }, delay);
    }, function(){
         clearTimeout(setTimeoutConst );

      });

and here is my html code

  <div class="container">

<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Tab One</li>
    <li class="tab-link" data-tab="tab-2">Tab Two</li>
    <li class="tab-link" data-tab="tab-3">Tab Three</li>
    <li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>

<div id="tab-1" class="tab-content current">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="tab-2" class="tab-content">
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="tab-3" class="tab-content">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div id="tab-4" class="tab-content">
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

I am still a beginner at jquery so I have no idea what to do. some help would be helpfully helpful. Thanks

Upvotes: 1

Views: 788

Answers (2)

Ronen Cypis
Ronen Cypis

Reputation: 21470

I would use $.hoverDelay() plugin that does exactly that. It lets you configure the delay(s) for the 'in' and 'out' events like so:

$('ul.tabs li').hoverDelay({
  delayIn: 200,
  delayOut:700,
  handlerIn: function($element){
    $element.css({backgroundColor: 'red'});  
  },
  handlerOut: function($element){
    $element.css({backgroundColor: 'auto'});  
  }
});

Upvotes: 1

Niki van Stein
Niki van Stein

Reputation: 10724

Using on('hover') is a bad idea, instead you should use either .hover() or on('mouseenter') and on('mouseleave').

The following code worked for me, note that you cannot use this inside the timeout function, storing the id into a variable would solve that.

I assume you want to cancel the timeout if the mouse leaves before the delay has expired, that is why I remove the timeout on mouseleave.

http://jsfiddle.net/k4wm1jr5/19/

var delay=1000, setTimeoutConst;
var tab_id, tab_id_this;

$(document).on("mouseenter", "ul.tabs li", function() {
     console.log("MOUSEENTER");
     tab_id = $(this).attr('data-tab');
     tab_id_this = $(this).attr('id');
     setTimeoutConst = setTimeout(function(){
               //Do whatever you like here
               //your code would be approximate like this:

               $('ul.tabs li').removeClass('current');
               $('.tab-content').removeClass('current');

               $("#"+tab_id_this).addClass('current');
               $("#"+tab_id).addClass('current');
      }, delay);
});
$(document).on("mouseleave", "ul.tabs li", function() {
    clearTimeout(setTimeoutConst );
});

on('hover') is a bad idea because of:

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

See documentation.

Upvotes: 1

Related Questions