jQuery Ẩn/Hiện với Slide trên Hover ... cách tốt hơn để làm điều này?

Question

Về cơ bản có một số rắc rối khi sử dụng Hover để ẩn hoặc hiển thị một mục.

Ý tưởng rất đơn giản, khi di chuột hiển thị div. Khi không còn lơ lửng, hãy ẩn nó đi. Vấn đề là nếu chuột di chuột qua div và rời khỏi quá nhanh, div hiển thị/ẩn sẽ vẫn hiển thị. Tôi hy vọng đây là một cái gì đó dễ dàng khắc phục và không phải là một vấn đề điển hình với sự kiện di chuột.

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); 
     } 
    ); 
    } 
); 

Styles trông giống như:

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

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

Và đánh dấu

<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

Sử dụng các plugin hoverIntent. Điều này tránh mọi thứ được hiển thị nếu người dùng chỉ cần di chuột qua các phần tử và tránh một chuỗi hoạt ảnh khó coi.

Answer 2

Tôi đã thử tập lệnh của bạn và nó đã hoạt động như bạn đã mô tả. Tôi đã thử gỡ bỏ children.is (": hidden") khỏi tập lệnh của bạn, nhưng sự cố vẫn xảy ra.

Khi tôi viết lại nó, tập lệnh div không bao giờ hiển thị. Vì vậy, có vẻ như vấn đề là với việc sử dụng jQuery trẻ em thay vì tìm để đến đối tượng:

Tuy nhiên có vấn đề:

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); 
     } 
    ); 
    } 
); 

trình như dự định:

$(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) 
    } 
    ) 
}) 

Và vâng, Trình cắm hoverIntent đẹp: P