jQuery - 將鼠標懸停在元素上並將元素設置爲該位置的動畫元素

我想製作一個菜單，請執行此操作：http://jsfiddle.net/8U9fy/1/（沒想要打擾他們定位所有這些......）但是，我想使它使它不依賴於菜單/鏈接大小..（類似於分配箭頭以根據特定元素類別或某物移動）jQuery - 將鼠標懸停在元素上並將元素設置爲該位置的動畫元素

我正在考慮類似.. http://docs.jquery.com/UI/Position但我不知道.animate是否可以與它一起使用..

所以，要說清楚..問題確實不是根據特定元素定位箭頭，而是..在動畫箭頭運動時這樣做..

想法？

編輯：我想實現類似像什麼香港專業教育學院在的jsfiddle例如做了什麼..布提想這樣做，以便它不事關什麼尺寸的菜單或鏈接...

目前箭頭的位置是由一個位置的左值來控制的，這意味着如果我想......可以說在鏈接之間添加填充，我將不得不一次又一次地調整.animate左值。

來源

2011-04-23 Joonas

你能不能改一下這個問題？目前尚不清楚。 – 2011-04-23 19:54:31

你是說當你將鼠標從一個菜單項移動到下一個時，動畫是平滑的，而不是在你點擊下一個元素時開始移動？ – Steve 2011-04-23 20:01:14

也許編輯更清晰 – Joonas 2011-04-23 20:02:52

這樣的事情應該管用。您需要根據需要調整位置計算。

var arrow = $(".Arrow"); 
$("ul#menu").delegate('a', 'mouseenter', function() { 
    var left = $(this).offset().left - arrow.parent().offset().left + $(this).outerWidth()/2 - arrow.width()/2 
    arrow.stop().animate({left: left}, 800, 'easeOutBack'); 
});

（編輯補充kingjiv的 '左' 的計算。）

來源

2011-04-23 19:58:51 Talljoe

@Talljoe這是相當不錯..但我真的很希望解決方案，不依賴於任何價值的變化 – Joonas 2011-04-23 20:14:37

和.. jquery ui position thingie似乎這樣做很好，easy..except至少是知道..你不能。動畫...我覺得有點難以相信.. – Joonas 2011-04-23 20:17:36

你是什麼意思「不依賴於價值的變化」？無論元素的大小或元素的數量如何，該示例都可以工作。你只需要找到正確的計算來將箭頭放在你想要的位置相對於元素的位置。 – Talljoe 2011-04-23 20:30:02

jQuery - 將鼠標懸停在元素上並將元素設置爲該位置的動畫元素

回答

相關問題