jQuery的懸停問題內容

之間移動太快鼠標時，我有以下的HTML重複頁面上多次：jQuery的懸停問題內容

<div class="outer"> 
    outer 
    <div class="inner"> 
     inner 
    </div> 
</div>

，並有這樣的jQuery：

$('.inner').hide(); 
$('.outer').hover(function(e) { 
    $(this).children('.inner').show("slide", { 
     direction: "right" 
    }, 1000); 
}, function(e) { 
    $(this).children('.inner').hide("slide", { 
     direction: "right" 
    }, 1000); 
});

正如你可以在這裏看到： http://jsfiddle.net/342q3/15/在div之間緩慢移動鼠標（等待動畫完成）可以實現一次只顯示一個內部div的所需效果。

但是，如果您快速移動鼠標之間的divs，所有的內部divs保持可見。

我試過使用stop（）函數，但沒有成功。 如何防止內部div保持打開狀態？

來源

2011-09-15 Andy

我想你會很快（將更多內容添加到'內部'中）必須將腳本完全更改爲更「用戶友好」的內容。 –

如果您停止動畫開始新一（滑出）前和使用find代替children（不知道爲什麼它不與children工作），它的工作原理像預想的那樣：

$('.inner').hide(); 
$('.outer').hover(function(e) { 
    $(this).find('.inner').stop(true, true).show("slide", { 
     direction: "right" 
    }, 1000); 
}, function(e) { 
    $(this).find('.inner').stop(true, true).hide("slide", { 
     direction: "right" 
    }, 1000); 
});

http://jsfiddle.net/AVLdW/

來源

2011-09-15 10:30:01 Niko

多奇怪！我嘗試過.stop（true，true）但帶有.children - 我想知道爲什麼這樣做不起作用... – Andy

它必須與children（）相關，只向下降DOM一級;我期望內部div在動畫中被包裹起來 – Patrick

PS：這仍然存在一個問題：如果你向下滑過幾個div然後停在其中一個下面的div中，上面的外部div會調整爲內部在你停下的仍然有可見內部的格子外面設置動畫。 – Patrick

嘗試使用animation()編寫代碼，這樣您就可以隨時stop()並設置默認樣式。

來源

2011-09-15 10:25:04 simoncereska

動畫（）是你想要的功能，我已經寫了使用這種functiong用這種語法的我的導航系統：

$("your-selecter").hover(function() { 

    $(this).stop().animate({ 
     backgroundPosition: '0 0' 
    }, 600); 
    }, function() { 
     $(this).stop().animate({ 
      backgroundPosition: '0 -100px' 
     }, 600); 
    }); 
};

顯然你不想改變你的BG位置，你會在那裏叫你滑動功能，但這是這種概念。

來源

2011-09-15 10:30:06 dougajmcdonald

jQuery的懸停問題內容

回答

相關問題