setTimeout不工作.hover（）离开/停止

Question

所以我试图在产品网格上进行悬停效果，显示更多信息等。我想在用户不再悬停网格元素时添加一些延迟，但我尝试过但没有运气：< / p>

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

这是我的问题的一个小提琴： fiddle

Answer 1

我认为你有错误的功能背景 你需要使用像

这样的东西

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

Fiddle

Answer 2

虽然只是使用闭包变量修复了一个问题，但还有另一个问题，如果你离开项目然后在执行计时器之前再次进入面板，它将被隐藏

$('.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>