jQuery的動畫的問題，溶液

我一個導航菜單的標記結構低於上工作，跨度元件被添加上的document.ready： -jQuery的動畫的問題，溶液

<ul id="menu"> 
     <li class="menu act">Additional Fixture<span class="active"></span></li> 
     <li class="menu">list with sub menu 
      <ul class="sub-menu"> 
       <li class="menu">Option one</li> 
      <li class="menu">Option two</li> 
      <li class="menu">Option three</li> 
      <li class="menu">Option four</li> 
      <li class="menu">Option five</li> 
     </ul> 
    </li> 
    <li class="menu"">Special Tricast</li>

跨度被定位與絕對設置寬度和高度，幷包含一個箭頭圖像作爲背景。

我使用jQuery當用戶點擊菜單類移動活動跨度所選擇的菜單（LI）元件的後面，作爲其選擇的視覺指示器的動畫跨度/箭頭圖像。

<ul id="menu"> 
     <li class="menu">Additional Fixture<span class="active"></span></li> 
     **<li class="menu act">list with sub menu</li>** 
</ul>

箭頭正確定位在文檔加載，但不 - ：

活動時（ACT）被設置在根裏，但如果其他地方放置在列表例如這工作正常當用戶點擊時移動到正確的選擇。我已經嘗試過我的divLocation變量的位置和偏移量，而且我目前正在使用位置，因爲即使在根目錄下，偏移量也無法工作。

我基本上想這取決於頁面的用戶導航到要設置的箭，動畫需要從任何無論列表的長度和位置的起始位置工作。

我搜羅了論壇，並嘗試了一些東西，但我很爲難，說實話和將不勝感激任何幫助！

下面是動畫跨度/箭頭圖像jQuery代碼： -

var divLocation = $(this).position(); 

$("span.active").animate({ 
    'top': divLocation.top + topOffset, 
     'left': divLocation.left + leftOffset 

}, animationSpeed, "linear", function(){ 

$(selectedElement).addClass("text-light"); 
    $(selectedElement).fadeTo("100", opacityIn); 


});

來源

2011-08-30 KryptoniteDove

解決方案：

我開始用下面發佈的代碼玩，才意識到我真難爲我自己通過嵌套含鋰元素本身的箭頭圖像的跨度。這使當前的li元素始終爲跨度的0位置，因此，如果它在節點3行進到節點1，則它必須減去負數。

此修復程序是非常簡單說真的，我搬到跨度到我的無序列表的的頂部和使用的jQuery的CSS設置頁面加載圖像的起始位置。這樣一來，我沒有在所有或亂用方程式來改變動畫代碼..數學從來就不是我的強項;）

工作液可以在這裏看到（http://www.kryptonite-dove.com /sandbox/menu/fix.html）感謝您的幫助！

來源

2011-09-02 10:07:39 KryptoniteDove

我不知道，如果我有問題，但檢查的子菜單裏有「位置：親屬」。如果跨度位置不正確，這可能是原因。

UPDATE

我想你應該重寫一下腳本。

// set height of the main links 
var mainLinksHeight = 35; 

// get index of the clicked element 
var nextLink; 

$('#menu li').click(function() { 
    nextLink = $(this).index(); 
    $("span.active").animate({ top: nextLink * mainLinksHeight }, animationSpeed, "linear"); 
});

希望你能修改這個基本的代碼來滿足你的需要。

來源

2011-08-31 22:20:07 Webars

子菜單是絕對的，但我會添加代碼，以防止有人從子菜單啓動，如果我得到它的工作;）這裏的CSS： - – KryptoniteDove

下面是兩個例子，當箭頭添加到第一位家長的運動效果不錯，加入第二位時你可以看到差異。我想知道的是如何讓它移動到選定的元素，而不管活動箭頭添加在哪裏。 http://kryptonite-dove.com/sandbox/menu/arrow-1st-parent.html http://kryptonite-dove.com/sandbox/menu/arrow-2nd-parent.html – KryptoniteDove

Thanks will give這是一個bash，讓你知道我怎麼走！ :) – KryptoniteDove

jQuery的動畫的問題，溶液

回答

相關問題