jQuery Hover Üzerinde Kaydırarak Gizle/Göster ... bunu yapmanın daha iyi yolu?

Question

Temel olarak bir öğeyi gizlemek veya göstermek için Hover özelliğini kullanırken sorun yaşamanız.

Fikir gayet basit, vurgulu bir div göster. Artık gezinmediğinde, gizleyin. Sorun, farenin div üzerinde kalması ve çok hızlı bir şekilde kalması durumunda, show/hide div'in görünür kalmasıdır. Umarım bu, kolayca düzeltilen bir şeydir ve vurgulu olayla ilgili tipik bir problem değildir.

jQuery 
(
    function() 
    { 
    jQuery(".slideDiv").hide(); 

    jQuery(".mainDiv").hover 
    (
     function() 
     { 
     var children = jQuery(this).children(".slideDiv"); 

     if (children.is(":hidden")) 
     { 
      children.show("slide", { direction: "left" }, 100); 
     } 
     }, 
     function() 
     { 
      var children = jQuery(this).children(".slideDiv"); 
      children.hide("slide", { direction: "left" }, 100); 
     } 
    ); 
    } 
); 

Stiller benziyor:

.mainDiv 
{ 
    margin:5px; 
    height:200px; 
} 

.slideDiv 
{ 
    background-color:Teal; 
    float:left; 
    height:200px; 
    position:absolute; 
    z-index:100; 
} 

Ve

<div class="mainDiv"> 
     <div class="showDiv"> 
      Hover me 
     </div> 
     <div class="slideDiv"> 
      Do you see me? 
     </div> 
    </div> 
    <div class="clear"></div> 
    <div class="mainDiv"> 
     <div class="showDiv"> 
      Hover me too 
     </div> 
     <div class="slideDiv"> 
      Do you see me now? 
     </div> 
    </div> 

Answer 1

Kullanım hoverIntent eklentisi biçimlendirme. Bu, kullanıcının sadece fareyi elemanların üzerine geçirmesi ve göze çarpan bir animasyon zincirinden kaçınması durumunda, gösterilen herhangi bir şeyden kaçınılmasını sağlar.

Answer 2

Komut dosyanızı denedim ve anlattığınız gibi yaptı. Children.is ("gizli") komut dosyasını komut dosyasından kaldırmayı denedim, ancak sorun hala ortaya çıktı.

Komut dosyasını yeniden yazdığımda, div asla görünür durumda kalmaz. amaçlanan

jQuery (
    function(){ 
    jQuery(".slideDiv").hide(); 
    jQuery(".mainDiv").hover (
     function() { 
     $(this).children(".slideDiv").show("slide", { direction: "left" }, 100); 
     },function(){ 
     $(this).children(".slideDiv").hide("slide", { direction: "left" }, 100); 
     } 
    ); 
    } 
); 

İşleri olarak:

$(document).ready(function(){ 
    $('.slideDiv').hide(); 
    $('.mainDiv').hover(
    function(){ 
     $(this).find('.slideDiv').show('slide', { direction: 'left' }, 100) 
    }, 
    function(){ 
     $(this).find('.slideDiv').hide('slide', { direction: 'left' }, 100) 
    } 
    ) 
}) 

Hareketsiz sorunları var: Yani, sorun nesnesine almak için bulmak jQuery'nin çocukları yerine kullanarak ile olduğu görülüyor

Ve evet, hoverIntent eklentisi güzel: P