Наведите указатель мыши на один из нескольких div и задержите, затем опустите ребенка div

Question

Я знаю, что есть много похожих вопросов, подобных этому, я искал и пытался часами, но не повезло.

То, что я пытаюсь сделать, это просто, есть множественный блок в моей странице, как этот и .description класса появится, если пользователь парить на .frame элемент

<div class="row"> 
    <div class="col-xs-4"> 
     <div class="frame"> 
      <div class="description"> 
       <h3>Title</h3> 
       <p>Description</p> 
      </div> 
     </div>   
    </div> 
    <div class="col-xs-4"> 
     <div class="frame"> 
      <div class="description"> 
       <h3>T2</h3> 
       <p>Description</p> 
      </div> 
     </div>   
    </div> 
</div> 

Я думаю, что это очень раздражает, когда пользователь прокручивается по экрану, и каждое описание запускается, поэтому я попытался добавить «условие задержки» до setTimeout(), таким образом, только когда пользователь останавливается на одном блоке по крайней мере на 1сек, появляется всплывающее окно

Но это просто не " t хорошо, и вот мой Demo

Это лучшее, что я могу сделать, функция задержки работает, но, похоже, на ней есть два триггера.

JQuery код:

var timer; 

$(document).ready(
    function(){ 
     $(".frame").hover(  
      function() { 
       var descrip_in=$(".description",$(this)) 
       timer = setTimeout(function(){descrip_in.slideToggle();}, 1000); 

      },  
      function() {  
       var descrip_out=$(".description",$(this)) 
       clearTimeout(timer); 
       descrip_out.slideToggle(1000) 
      } 
     );  
    } 
); 

Answer 1

Ах, это был тонкий.

Используя slideToggle вместо slideDown и slideUp, вы переключили всплывающее окно на выходе, если вы покинули элемент до истечения таймаута!

var timer; 

$(document).ready(
    function(){ 
     $(".frame").hover(  
      function() { 
       var descrip_in=$(".description",$(this)) 
       timer = setTimeout(function(){descrip_in.slideDown();}, 1000); 

      },  
      function() {  
       var descrip_out=$(".description",$(this)) 
       clearTimeout(timer); 
       descrip_out.slideUp(1000) 
      } 
     );  
    } 
); 

http://jsfiddle.net/1esrLrfs/71/

Answer 2

Вы можете проверить в обработчике из функции, является ли ваш элемент отображения или нет, а затем применить функцию переключения.

Из кода

var timer ,isToggle; 
    $(document).ready(
    function(){ 
     $(".frame").hover(  
      function() { 
       var descrip_in=$(".description",$(this)) 
       timer = setTimeout(function(){descrip_in.slideToggle();}, 1500);   
      },  
      function() {  
       var descrip_out=$(".description",$(this)) 
       clearTimeout(timer); 
       if(descrip_out.css('display') !== 'none') 
       descrip_out.slideToggle(1000) 
      } 
     );  
    } 
); 

Answer 3

То же самое можно использовать с show и hide функций тоже. Функция slideToggle вызывается даже до достижения таймаута, и она не будет работать.

Вы можете увидеть Demo

$(function() { 
    var timeoutId; 
    $(".frame").hover(showDesc, hideDesc); 
}); 

function showDesc(){ 
var descrip_in=$(".description",$(this)) 
timer = setTimeout(function(){descrip_in.show(200);}, 1000); 
} 

function hideDesc(){ 
    var descrip_out=$(".description",$(this)) 
    clearTimeout(timer); 
    descrip_out.hide(300) 
}