jQuery show/hide - Gecikme değişkeniyle ilgili soru

Question

Belirli bir div attığınız zaman bir kutuyu göstermek için aşağıdaki kodu kullanıyorum ve solukta gecikme ayarını yaptım ancak fadeOut etkisini iptal etmenin bir yolu var mı? kullanıcı div'a geri dönüyor mu? Muhtemelen uzakta div gitmek ve geri dönmek varsa bana çalışma fadeIn fonksiyonunu durdurmak gerek bir olgu olduğunu düşünüyorum Düşünüyorum divlere

<div class="cart-box" id="cart-box"><a href="#">Cart</a><div class="cart-container" id="cart-container"><div class="cart-contents">contents</div></div></div> 

için

jQuery("#cart-box").hover(function() 
{ 
    jQuery("#cart-container").fadeIn('fast'); 
}, function() 
{ 
    jQuery("#cart-container").delay(800).fadeOut('fast'); 
}); 

Kodu.

Herhangi bir düşünce jQuery için hala çok yararlı olabilir!

Bir yan notda, kutunun, içeriğin yalnızca solma yerine içeriğin yüksekliğine kadar genişlemesini sağlamak için ne gibi bir etki kullanmalıyım?

Answer 1

Özellikle bu tür fare giriş/çıkış işlevleri için jQuery'de yazılmış çok güzel bir eklenti var.

Bu menü etkileşimleri için harika, hoverIntent.js

O vb sonraki slayt eylemi gerçekleştirmeden önce yapılandırılabilir gecikme yaratır denir. Son kullanma olaylarının her birinde kendi işlevlerinizi de arayabilirsiniz.

varsayılan kullanımının bir örneğidir:

$("#menu li").hover(showMenu, fadeMenu) 

fadeMenu ve showMenu menüsünün görünümünü değiştirmek için jQuery fonksiyonları olacaktır Sayede.

var config = {  
    over: showMenu, 
    timeout: 500, // number = milliseconds delay before fadeMenu is called 
    out: fadeMenu 
}; 

$("#menu li").hoverIntent(config) 

Düzenleme::

Eğer Örneğin, bu kadar uzun gizli div göstermek için tetikleyici olarak o zaman mümkün olmalıdır

sadece kullanmak gecikme kendi yapılandırma oluşturmak için Aşağıdakileri kullanmak için:

var config = {  
    over: showMenu, 
    timeout: 500, // number = milliseconds delay before fadeMenu is called 
    out: fadeMenu 
}; 

$("#cart-box a").hoverIntent(config); 

function showMenu() { 
    jQuery("#cart-container").fadeIn('fast'); 
} 

function fadeMenu() { 
    jQuery("#cart-container").fadeOut('fast'); 
}