JQuery UI .show（'幻燈片'）沒有正確動畫

我試圖製作一個div，當你將鼠標放在「觸發器」上時很好地滑出。它正在全面出現，然後迅速消失並再次滑出。我似乎無法弄清楚這種行爲的原因。JQuery UI .show（'幻燈片'）沒有正確動畫

~~如果需要我可以把樣品放在一個位。~~ 測試用例增加here。這發生在除IE6以外的所有主流瀏覽器上。

HTML：

<div class='wrap'> 
    <div id='navtitle'> 
      NAV>> 
    </div> 
     <div id='nav'> 
      <div id='navlist' class='rounded curvyRedraw'> 
       <div class='top'><div></div></div> 
       <ul> 
        <li><a href='#'>Home</a></li> 
        <li><a href='#'>Singles</a></li> 
        <li><a href='#'>Supplies</a></li> 
        <li><a href='#'>Cart</a></li> 
       </ul> 
      </div> 

     </div> 
    </div>

的Javascript：

$(document).ready(function(){ 
$('#navlist').hide(); 
$('#navtitle').bind("mouseenter", function(){ 
    $('#navlist').show('slide'); 
}); 
$('#nav').bind("mouseleave", function(){ 
    $('#navlist').hide('slide'); 
    });

來源

2009-12-07 Chris Sobolewski

不知道doctype.com會不會對這個問題更好。 – 2009-12-07 20:37:12

我認爲一些問題是由於div滑出時焦點發生變化，導致處理程序被調用爲焦點更改，儘管我可能在這方面是錯誤的。這可能是因爲jQuery如何處理跨瀏覽器鼠標事件（並非所有瀏覽器具有相同的事件，因此jQuery可能會近似它們）。我能夠通過應用鼠標事件處理程序來處理單個事件並使用回調來確保在任何給定時間只有一個活動處於活動狀態，因此不會在它們之間來回切換，從而能夠「主要」完成工作。請注意，我必須爲隱藏提供明確的方向/速度，否則它就會消失。不知道爲什麼，儘管它可能與我的示例如何設置有關，並且一旦列表元素的左邊緣離開頁面，div就會消失。

$(function() { 
    $('#navlist').hide(); 
    $('#navtitle').one('mouseenter', showOnEnter); 
}); 

function showOnEnter() { 
    $('#navlist').show('slide', function() { 
     $('#nav').one('mouseleave', function() { 
      $('#navlist').hide('slide', { direction: 'left' }, 1000, function() { 
       $('#navtitle').one('mouseenter',showOnEnter); 
      }); 
     }); 
    }); 
}

來源

2009-12-07 22:01:16 tvanfosson

令人沮喪的部分是，我有它在一個副本，我無意中保存了... – 2009-12-08 01:46:08

版本控制是你的朋友... – tvanfosson 2009-12-08 01:55:14

其實，你指出我在正確的方向。你提到的關於改變焦點的部分慢慢地回憶起了我的記憶。 #navtitle曾經與#navlist一起嵌套在#nav中，但我更改了一些佈局。把它放回#nav div裏面已經成功了。 – 2009-12-08 01:56:05

這將有助於看到一個例子。首先突出的是>>。當你刪除它們時有任何改變？它不應該是一個問題（<是瀏覽器更多的問題），但我想問問。

來源

2009-12-07 20:47:46 Tom

JQuery UI .show（'幻燈片'）沒有正確動畫

回答

相關問題