Lỗi hiệu ứng chuột di chuột jquery luôn kích hoạt một vài lần khi di chuột

Question

Tôi có một lưới phòng trưng bày đơn giản với một khoảng lồng nhau hiển thị tiêu đề, mà tôi muốn trượt lên trên chuột và ẩn chuột.

Mọi thứ hoạt động tốt, ngoại trừ khi chuột di chuyển xuống vị trí tựa đề và/hoặc di chuyển ra khỏi ô từ dưới cùng của ô, thì hiệu ứng di chuột lặp lại một vài lần không kiểm soát được.

Lúc đầu, tôi nghĩ rằng nó có thể là do khoảng được chứa trong các neo đó là kích hoạt di chuột, nhưng di chuyển nó ra cũng không hoạt động.

Bất kỳ ý tưởng nào?

Bản demo là ở đây: http://www.winterealm.com/gallery/

Markup:

<div class="gallery_container"> 
    <ul> 
     <li><a href=""><img src="assets/img/artistisch.jpg" alt="aaa"/><span class="title">Category A</span></a></li> 
     <li><a href=""><img src="assets/img/attraktiv.jpg" alt="bbb"/><span class="title">Category B</span></a></li> 
     <li><a href=""><img src="assets/img/historisch.jpg" alt="ccc"/><span class="title">Category C</span></a></li> 
     <li><a href=""><img src="assets/img/popart.jpg" alt="ddd"/><span class="title">Category D</span></a></li> 
     <li><a href=""><img src="assets/img/portrait.jpg" alt="eee"/><span class="title">Category E</span></a></li> 
     <li><a href=""><img src="assets/img/sketch.jpg" alt="fff"/><span class="title">Category F</span></a></li> 
    </ul> 
</div> 

Đây là jquery

$(document).ready(function(){ 
    $('.gallery_container a').mouseover(function(){ 
     $(this).children('.title').animate({ 
      opacity: 100, 
      bottom: 0 
     },200); 
    }); 

    $('.gallery_container a').mouseout(function(){ 
     $(this).children('.title').animate({ 
      opacity: 0, 
      bottom: -30 
     },200); 
    }); 
}); 

Answer 1

Vấn đề ở đây là di chuyển chuột mỗi lần di chuyển chuột qua phần tử hoặc phần tử con. Hãy thử sử dụng các sự kiện mouseenter và mouseleave để thay thế.

Answer 2

Vì vậy, bạn có thể muốn thực hiện một cơ chế khóa thực sự đơn giản, như trong:

var fCurrentlyMoving = false;  
$('.gallery_container a').mouseover(function(){ 
    if (!fCurrentlyMoving) { 
     fCurrentlyMoving = true; 
     $(this).children('.title').animate({ 
      opacity: 100, 
      bottom: 0 
     },200, function() { 
      fCurrentlyMoving = false; 
     }); 
    } 
}); 

nó không phải là cuộc đua kín đáo-điều kiện khôn ngoan, nhưng nó không cần phải được.

Answer 3

Hãy thử điều này.

$(document).ready(function() { 
$('.gallery_container a').hover(function() { 
    $(this).children('.title').stop().animate({ 
     opacity: 100, 
     bottom: 0 
    }, 200); 
}, function() { 
    $(this).children('.title').stop().animate({ 
     opacity: 0, 
     bottom: -30 
    }, 200); 
}); 
}); 

Bạn có thể xem bản trình diễn trực tiếp tại đây. - http://jsfiddle.net/8Hd7s/