setTimeout dont work on .hover() leave/stop

Question

So I am trying to make a hover effect on a product grid, to show more info etc. I want to add some delay when the user is not hovering the grid element anymore, but I have tried but with no luck:

$('.product-grid > .panel').hover(function() {
    $(this).addClass('active');     
}, function() {
    setTimeout(function(){
        $(this).removeClass('active');
    }, 2000);
});

Here is a fiddle of my problem: fiddle

Answer 1

I suppose you have wrong context of function You need to use something like

$('.product-grid > .panel').hover(function() {
    $(this).addClass('active');     
}, function() {
    var elem = $(this);
    setTimeout(function(){
        elem.removeClass('active');
    }, 2000);
});

Fiddle

Answer 2

Although just using the closure variable fixes one problem, there is another issue where if you leave the item and then enters the panel again before the timer is executed, it will get hidden

$('.product-grid > .panel').hover(function () {
    var $this = $(this);
    clearTimeout($this.data('hoverTimer'));
    $(this).addClass('active');
}, function () {
    var $this = $(this);
    var timer = setTimeout(function () {
        $this.removeClass('active');
    }, 2000);
    $this.data('hoverTimer', timer)
});

$('.product-grid > .panel').hover(function() {
  var $this = $(this);
  clearTimeout($this.data('hoverTimer'));
  $(this).addClass('active');
}, function() {
  var $this = $(this);
  var timer = setTimeout(function() {
    $this.removeClass('active');
  }, 2000);
  $this.data('hoverTimer', timer)
});

body {
  padding-top: 30px;
  background-color: #f1f1f9;
}
img {
  max-width: 100%;
}
.panel {
  position: relative;
  padding: 15px;
}
.product-grid {
  text-align: center;
}
.product-grid .image-container {
  margin: 0 0 20px 0;
  width: 100%;
  text-align: center;
}
.product-grid .image-container img {
  margin: 0 auto;
}
.product-grid h4,
.front-product-grid h5 {
  color: #542c00;
}
.product-grid h4 {
  height: 40px;
  overflow: hidden;
  text
}
.product-grid .overlay {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 20px;
  width: 100%;
  height: 0;
  background-color: #fff;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.product-grid > .panel.active .overlay {
  padding: 20px;
  height: 100%;
}
.product-grid .overlay > .info {
  font-size: 14px;
  text-align: justify;
  height: 60%;
  overflow: hidden;
}
.product-grid .overlay .btn {
  position: absolute;
  left: 20px;
  right: 20px;
}
.product-grid .overlay .btn-blue {
  bottom: 64px;
}
.product-grid .overlay .btn-brown {
  bottom: 20px;
}
.product-grid .overlay .btn.full {
  width: calc(100% - 40px);
}
.btn {
  border-radius: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.btn > a {
  color: inherit;
}
.btn > a:hover {
  text-decoration: none;
  color: inherit;
}
.btn.full {
  margin: 5px 0;
  width: 100%;
}
.btn-brown {
  color: #fff;
  background-color: #542c00;
}
.btn-brown:hover,
.btn-brown:focus {
  color: #f1f1f9;
  background-color: #331b02
}
.btn-blue {
  color: #fff;
  background-color: #a8dade;
}
.btn-blue:hover {
  color: #fff;
  background-color: #0a7981;
}
.btn-blue:focus {
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product-container">
  <div class="col-xs-12 col-sm-6 col-md-3 product-grid">  
    <div class="panel">    
      <div class="image-container"><div class="pki"><div class="pki_top"><a href="#"><img src="http://lorempixel.com/400/400/food/" /></a></div></div></div>    
      <h4>Product title</h4>    
      <div class="product-price">$<span class="price">295,00</span></div>        
      <div class="overlay">              
        <h5>Product title</h5>  
        <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur dapibus diam, non laoreet ex imperdiet auctor. Suspendisse tincidunt in lorem nec mollis. Nulla a iaculis purus, non laoreet diam. Integer tincidunt, libero eu feugiat pretium, libero mi vehicula lorem, at pretium augue risus blandit enim. Cras egestas at ante at interdum. In lobortis lacus sit amet diam efficitur auctor. Praesent porta mattis leo sed vehicula. Sed vitae magna tincidunt lacus scelerisque hendrerit. Nulla eget urna nec quam laoreet dignissim at vehicula erat. Maecenas eleifend scelerisque blandit. Maecenas gravida, magna sed venenatis aliquet, justo nulla tincidunt ipsum, sit amet pellentesque ligula eros a dolor.</div>                   
        <div class="overlay-buttons"><a href="#" class="btn btn-blue full">Read more</a> 
          <a class="addToBasket btn_addToBasket btn btn-brown full" item_id="1059" basket_id="16" href="#" data-toggle="tooltip" data-placement="top" title="" style="display: block;" data-original-title="Du har valgt 54 / 17.2">Add to basket</a></div>     
      </div>      
    </div></div>
  <div class="col-xs-12 col-sm-6 col-md-3 product-grid">  
    <div class="panel">    
      <div class="image-container"><div class="pki"><div class="pki_top"><a href="#"><img src="http://lorempixel.com/400/400/food/" /></a></div></div></div>    
      <h4>Product title</h4>    
      <div class="product-price">$<span class="price">295,00</span></div>        
      <div class="overlay">              
        <h5>Product title</h5>  
        <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur dapibus diam, non laoreet ex imperdiet auctor. Suspendisse tincidunt in lorem nec mollis. Nulla a iaculis purus, non laoreet diam. Integer tincidunt, libero eu feugiat pretium, libero mi vehicula lorem, at pretium augue risus blandit enim. Cras egestas at ante at interdum. In lobortis lacus sit amet diam efficitur auctor. Praesent porta mattis leo sed vehicula. Sed vitae magna tincidunt lacus scelerisque hendrerit. Nulla eget urna nec quam laoreet dignissim at vehicula erat. Maecenas eleifend scelerisque blandit. Maecenas gravida, magna sed venenatis aliquet, justo nulla tincidunt ipsum, sit amet pellentesque ligula eros a dolor.</div>                   
        <div class="overlay-buttons"><a href="#" class="btn btn-blue full">Read more</a> 
          <a class="addToBasket btn_addToBasket btn btn-brown full" item_id="1059" basket_id="16" href="#" data-toggle="tooltip" data-placement="top" title="" style="display: block;" data-original-title="Du har valgt 54 / 17.2">Add to basket</a></div>     
      </div>      
    </div></div>
  <div class="col-xs-12 col-sm-6 col-md-3 product-grid">  
    <div class="panel">    
      <div class="image-container"><div class="pki"><div class="pki_top"><a href="#"><img src="http://lorempixel.com/400/400/food/" /></a></div></div></div>    
      <h4>Product title</h4>    
      <div class="product-price">$<span class="price">295,00</span></div>        
      <div class="overlay">              
        <h5>Product title</h5>  
        <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur dapibus diam, non laoreet ex imperdiet auctor. Suspendisse tincidunt in lorem nec mollis. Nulla a iaculis purus, non laoreet diam. Integer tincidunt, libero eu feugiat pretium, libero mi vehicula lorem, at pretium augue risus blandit enim. Cras egestas at ante at interdum. In lobortis lacus sit amet diam efficitur auctor. Praesent porta mattis leo sed vehicula. Sed vitae magna tincidunt lacus scelerisque hendrerit. Nulla eget urna nec quam laoreet dignissim at vehicula erat. Maecenas eleifend scelerisque blandit. Maecenas gravida, magna sed venenatis aliquet, justo nulla tincidunt ipsum, sit amet pellentesque ligula eros a dolor.</div>                   
        <div class="overlay-buttons"><a href="#" class="btn btn-blue full">Read more</a> 
          <a class="addToBasket btn_addToBasket btn btn-brown full" item_id="1059" basket_id="16" href="#" data-toggle="tooltip" data-placement="top" title="" style="display: block;" data-original-title="Du har valgt 54 / 17.2">Add to basket</a></div>     
      </div>      
    </div></div>
  <div class="col-xs-12 col-sm-6 col-md-3 product-grid">  
    <div class="panel">    
      <div class="image-container"><div class="pki"><div class="pki_top"><a href="#"><img src="http://lorempixel.com/400/400/food/" /></a></div></div></div>    
      <h4>Product title</h4>    
      <div class="product-price">$<span class="price">295,00</span></div>        
      <div class="overlay">              
        <h5>Product title</h5>  
        <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur dapibus diam, non laoreet ex imperdiet auctor. Suspendisse tincidunt in lorem nec mollis. Nulla a iaculis purus, non laoreet diam. Integer tincidunt, libero eu feugiat pretium, libero mi vehicula lorem, at pretium augue risus blandit enim. Cras egestas at ante at interdum. In lobortis lacus sit amet diam efficitur auctor. Praesent porta mattis leo sed vehicula. Sed vitae magna tincidunt lacus scelerisque hendrerit. Nulla eget urna nec quam laoreet dignissim at vehicula erat. Maecenas eleifend scelerisque blandit. Maecenas gravida, magna sed venenatis aliquet, justo nulla tincidunt ipsum, sit amet pellentesque ligula eros a dolor.</div>                   
        <div class="overlay-buttons"><a href="#" class="btn btn-blue full">Read more</a> 
          <a class="addToBasket btn_addToBasket btn btn-brown full" item_id="1059" basket_id="16" href="#" data-toggle="tooltip" data-placement="top" title="" style="display: block;" data-original-title="Du har valgt 54 / 17.2">Add to basket</a></div>     
      </div>      
    </div></div>
</div>